Frontend Components
Frontend Components
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.
When to use this skill
- When creating new UI components in React, Vue, Svelte, or similar frameworks
- When refactoring existing components to improve reusability or composability
- When defining component props, interfaces, TypeScript types, or default values
- When managing local component state or deciding whether to lift state up
- When building reusable UI elements (buttons, cards, inputs, modals, dropdowns)
- When implementing component composition patterns (children, slots, render props)
- When working with component files (.jsx, .tsx, .vue, .svelte, .js)
- When splitting large components into smaller, focused sub-components
- When documenting component usage, props, or creating component libraries
- When encapsulating component logic and keeping internal details private
Instructions
More from coreyja/coreyja.com
frontend css
Write maintainable CSS following the project's established methodology, whether using Tailwind utility classes, BEM naming, CSS modules, or styled-components. Use this skill when styling UI components or pages with CSS, applying design system tokens for colors and spacing, or working with CSS frameworks. When writing utility classes, custom styles, or responsive design rules. When working with .css, .scss, .module.css files, or inline styles in JSX/templates. When establishing or maintaining design tokens for consistent styling. When optimizing CSS for production builds with purging or tree-shaking unused styles.
11global conventions
Follow established project structure, version control practices, documentation standards, and development workflows to maintain consistency across the team. Use this skill when organizing files and directories in a project. When writing README documentation or contributing guidelines. When creating git commits with clear messages or pull request descriptions. When managing environment configuration or dependencies. When setting up feature flags or maintaining changelogs. When establishing code review processes or testing requirements. This skill applies to all project management and development workflow tasks.
9backend api
Design and implement RESTful API endpoints following REST principles, consistent naming conventions, and proper HTTP methods. Use this skill when creating or modifying API routes, controllers, or handlers in backend code. When implementing endpoint logic that handles HTTP requests (GET, POST, PUT, PATCH, DELETE). When working with API versioning, query parameters, or response formatting. When defining URL structures for resource-based endpoints. When setting up rate limiting or HTTP status code handling. When working with files like route definitions, controller files, API handler modules, or web framework configuration files.
8backend models
Define database models with clear naming, appropriate data types, proper constraints, and relationship definitions. Use this skill when creating or modifying ORM model files, database entity definitions, or data structure schemas. When defining table relationships, foreign keys, and cascade behaviors. When implementing model validation rules, timestamps, or indexes. When working with model files in frameworks like SQLAlchemy, Sequelize, ActiveRecord, SQLx, Prisma, or similar ORMs. When choosing appropriate data types for columns or establishing data integrity constraints (NOT NULL, UNIQUE, foreign keys).
8backend queries
Write secure, performant database queries using parameterized statements, proper indexing, and query optimization techniques. Use this skill when writing SQL queries, ORM query methods, or database access code. When implementing data fetching logic that retrieves or updates database records. When optimizing queries to prevent N+1 problems through eager loading or joins. When using WHERE clauses, JOIN operations, or ORDER BY statements. When implementing transactions for related database operations. When working with query builder methods, raw SQL, or ORM query interfaces. When setting query timeouts or implementing query result caching.
8global validation
Implement secure, comprehensive input validation on both client and server sides using allowlists, type checking, and sanitization to prevent injection attacks. Use this skill when handling user input from forms, API requests, or any external data source. When implementing form validation logic with field-specific error messages. When validating data types, formats, ranges, and required fields. When sanitizing input to prevent SQL injection, XSS, or command injection. When validating business rules like sufficient balance or valid date ranges. When implementing both client-side validation for user experience and mandatory server-side validation for security.
8