skills

Improve, refactor, review, and systematize web UI styling with CSS design tokens, cascade layers, Tailwind theme variables, semantic color/spacing/typography tokens, dark mode, accessibility checks, and maintainable component styling. Use this skill whenever the user asks to improve CSS, redesign a site, clean up stylesheets, migrate hardcoded values to tokens, organize Tailwind themes/classes, review a PR for design-token or CSS architecture issues, create or update a design system, add light/dark themes, or make future UI changes easier for agents.

Review existing code or architecture and decide whether a specific design pattern would improve it without overengineering. Use this whenever the user is asking whether a pattern is justified, comparing nearby patterns like Strategy vs State or Adapter vs Facade vs Proxy, or refactoring code with recurring branching, growing state logic, hard-to-extend construction, or inconsistent wrappers. Do not use this for broad system design unless the core question is pattern fit, refactoring shape, or whether a simpler non-pattern refactor is better.

Write secure-by-default Node.js and TypeScript applications following security best practices. Use when: (1) Writing new Node.js/TypeScript code, (2) Creating API endpoints or middleware, (3) Handling user input or form data, (4) Implementing authentication or authorization, (5) Working with secrets or environment variables, (6) Setting up project configurations (tsconfig, eslint), (7) User mentions security concerns, (8) Reviewing code for vulnerabilities, (9) Working with file paths or child processes, (10) Setting up HTTP headers or CORS.

Introduce React anti-patterns and common mistakes into existing React codebases for training, review, or teaching. Use when asked to intentionally degrade React performance or code quality while keeping apps functional, or to generate anti-pattern examples for junior developer education.