andireuter/skills-webapp Skills

Create or refactor a React ATOM component (smallest reusable UI primitive). Use for buttons, inputs, icons, text, badges, loaders, etc. Keep atoms presentational and composable.

Audit a React component (or folder) for Atomic Design correctness and refactor recommendations. Use when components are too large, props are exploding, or responsibilities are unclear.

Create or refactor a React MOLECULE (a small composition of atoms). Use for input groups, labeled fields, search bars, card headers, etc. Keep molecules reusable and lightly stateful only for UI concerns.

Create or refactor a React ORGANISM (a meaningful UI section composed of molecules/atoms). Use for nav bars, product grids, comment lists, forms, dialogs, etc. Organisms may accept data and callbacks but should remain reusable across pages.

Create a React PAGE that binds templates/organisms to real app data and routing. Use for route-level components. Pages handle data loading, orchestration, and side effects.

Create a React TEMPLATE that defines layout and composition without binding to real data sources. Use for page shells, dashboards, list-detail layouts, etc. Templates wire organisms together and expose slots/regions.

Audit styled-jsx usage for scoping leaks, overly global selectors, unsafe interpolations, and maintainability issues; propose targeted refactors.

Create or refactor a React functional component styled with styled-jsx (<style jsx>). Use for scoped component styles, including variants, theming via CSS variables, and accessible UI patterns.

Configure styled-jsx to work with strict CSP using nonces (Next.js/custom Document patterns). Use when CSP blocks inline styles.

Implement dynamic styling in styled-jsx using best practices (CSS variables, className toggling, safe interpolations). Use for hover/active state, variant switches, theming, and runtime sizes/colors.

Add or refactor global styles using styled-jsx (<style jsx global>). Use for resets, typography defaults, global tokens, and safe one-off global selectors.

Migrate a component from plain CSS/CSS Modules/other CSS-in-JS to styled-jsx while preserving behavior, accessibility, and SSR compatibility.

Use styled-jsx/css resolve to style nested child components from a parent while preserving encapsulation. Use when you need to target a child component’s className from a parent.

Create or update vite.config.ts for a Vite React-TS project, following best practices (defineConfig, aliases, env usage, server/build defaults).

Explain and implement the production build + static deployment workflow for a Vite React-TS app (build output, base path, preview, common hosts).

Add environment variables in a Vite React-TS project correctly (VITE_ prefix, typing, .env files, safe usage in React components).

Scaffold a new Vite project using pnpm + React + TypeScript (react-ts), then apply recommended baseline setup (scripts, structure, editor config, git init).

Add a best-practice quality baseline to a Vite React-TS project (TypeScript checking, ESLint, formatting, scripts). Keep it minimal and conventional.

Add a testing setup to a Vite React-TS project (Vitest + Testing Library) following best practices, with minimal configuration and fast feedback.