Run any Skill in Manus with one click

frontend-components

Stars6

Forks1

UpdatedNovember 9, 2025 at 14:09

Design reusable, composable UI components with single responsibility, clear interfaces, and proper state management. Use this skill when creating or refactoring React, Vue, Svelte, or other framework components. When defining component props, interfaces, or APIs. When managing component state or lifting state up to parent components. When building reusable UI elements like buttons, cards, forms, modals, or lists. When implementing component composition patterns. When working with component files (.jsx, .tsx, .vue, .svelte). When documenting component usage or creating component libraries.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

coreyja

coreyja/coreyja.com

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name

Frontend Components

description

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

For details, refer to the information provided in this file: frontend components

More from this repository

same repository

backend-api

coreyja/coreyja.com

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.

2025-11-096

backend-migrations

coreyja/coreyja.com

Create and manage database migrations with proper rollback methods, focused changes, and zero-downtime deployment considerations. Use this skill when creating new database migration files, modifying table schemas, adding or removing columns, creating or dropping indexes, or managing database version control. When working with migration directories, schema definition files, or database change scripts. When implementing backwards-compatible database changes for production deployments. When separating schema changes from data migrations.

2025-11-096

backend-models

coreyja/coreyja.com

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).

2025-11-096

backend-queries

coreyja/coreyja.com

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.

2025-11-096

frontend-accessibility

coreyja/coreyja.com

Build accessible user interfaces with semantic HTML, proper ARIA attributes, keyboard navigation, and screen reader compatibility. Use this skill when creating or modifying HTML markup, UI components, forms, or interactive elements. When implementing keyboard navigation, focus management, or tab order. When adding alternative text for images or labels for form inputs. When ensuring sufficient color contrast ratios. When working with navigation menus, modals, buttons, or dynamic content. When structuring pages with proper heading hierarchy (h1-h6). When testing UI changes for screen reader compatibility.

2025-11-096

frontend-css

coreyja/coreyja.com

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.

2025-11-096

name

Frontend Components

description

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

For details, refer to the information provided in this file: frontend components