Run any Skill in Manus with one click

frontend-components

Structure React 19+ components following best practices for organization, state management, props handling, and code readability with top-down structure and single responsibility principle. Use this skill when creating new React components, refactoring existing components, organizing component logic, managing component state, defining prop interfaces (IComponentProps with I prefix), or implementing component patterns. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend component implementations. This skill ensures predictable top-down structure (imports → types/interfaces → component → hooks → derived values → JSX), proper props destructuring with defaults in function signature, manageable component size (split at >300 lines), composition via Shadcn Slot pattern (asChild prop), React 19 patterns (use() hook for promises, useActionState for forms, useOptimistic for immediate feedback), no manual useMemo/useCallback (React Compiler handles memoization), Server Compo

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/TheophilusChinomona/theochinomona.tech --skill frontend-components

Copy and paste this command into Claude Code to install the skill

Source

TheophilusChinomona/theochinomona.tech

Stars0

Forks0

UpdatedDecember 29, 2025 at 21:33

SKILL.md

readonly

name

Frontend Components

description

Frontend Components

When to use this skill:

When creating new React components with React 19+ features
When refactoring large components into smaller ones (>300 lines)
When organizing component structure and code order (top-down readability)
When defining component props with TypeScript interfaces (IComponentProps)
When implementing state management with useState, useOptimistic, or Zustand
When using composition patterns with Shadcn/ui Slot and asChild prop
When handling conditional rendering and early returns
When using React 19 Actions API (useActionState, useFormStatus) for forms
When using the use() hook to unwrap promises in Server Components
When extracting reusable component logic into custom hooks
When working on component files (.tsx, .jsx, components/.)
When reviewing component structure for readability (scroll test)
When deciding between local state, lifted state, or global state (Zustand)
When implementing optimistic UI updates with useOptimistic

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.

Instructions

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

More from this repository

same repository

backend-api

TheophilusChinomona/theochinomona.tech

Design and implement RESTful API endpoints following REST principles with proper HTTP methods, status codes, resource-based URLs, and rate limiting. Use this skill when creating or modifying API endpoints, route handlers, controllers, or any backend API layer code. Apply when working on files that define API routes (routes/*.ts, controllers/*.ts, api/*.ts, *Controller.cs), implement request/response handlers, establish API versioning, or configure endpoint middleware. Use when building Bun/Express APIs, ASP.NET Core Web APIs, or Next.js API routes. This skill ensures RESTful design with clear resource-based URLs, consistent lowercase hyphenated naming, appropriate HTTP methods (GET, POST, PUT, PATCH, DELETE), proper status codes (200, 201, 400, 404, 500), plural nouns for resources (/users, /products), limited nesting depth (2-3 levels max), query parameters for filtering/sorting/pagination, API versioning strategies, and rate limiting headers in responses.

2025-12-290

backend-migrations

TheophilusChinomona/theochinomona.tech

Create and manage database migrations following best practices for reversibility, zero-downtime deployments, and version control. Use this skill when creating migration files, modifying database schemas, adding or removing tables/columns, managing indexes, or performing data transformations. Apply when working on migration files (migrations/*.ts, migrations/*.sql, *_migration.py), Prisma schema changes, Supabase migrations, or any database evolution tasks. This skill ensures reversible migrations with rollback/down methods, small focused single-change migrations, zero-downtime deployment compatibility, separated schema and data migrations, safe concurrent index creation on large tables, clear descriptive naming conventions, and proper version control practices (never modify deployed migrations).

2025-12-290

backend-models

TheophilusChinomona/theochinomona.tech

Define database models and schemas with proper data types, constraints, relationships, and validation rules for PostgreSQL (Supabase/Bun.sql) and Firestore (Firebase). Use this skill when creating or modifying database models, ORM entity definitions, Prisma schemas, or Firestore document structures. Apply when working on model files (models/*.ts, entities/*.ts, schema.prisma, models/*.py, Models/*.cs), defining database relationships, setting up validation rules, or implementing data integrity constraints. This skill ensures snake_case naming for SQL and camelCase for NoSQL, required timestamps (created_at/updated_at), UUIDs for SQL and auto-generated IDs for Firestore, foreign key constraints with indexed columns, Row Level Security (RLS) policies for Supabase, strict Firestore security rules, normalized data for SQL (3NF) with denormalization for Firestore read performance, and pgvector setup for AI embeddings.

2025-12-290

backend-queries

TheophilusChinomona/theochinomona.tech

Write efficient and secure database queries following best practices for SQL injection prevention, N+1 query optimization, and performance for PostgreSQL (Bun.sql, Prisma, Supabase) and Firestore. Use this skill when writing or modifying database queries, implementing data fetching logic, working with ORMs (Prisma, TypeORM, Entity Framework), using Bun.sql native driver, querying Firestore collections, or implementing caching strategies. Apply when working on service files (services/*.ts, repositories/*.ts, *Service.cs), query builder implementations, data access layers, or any code that fetches or manipulates data. This skill ensures parameterized queries to prevent SQL injection (never interpolate user input), eager loading to prevent N+1 problems, selective column fetching (no SELECT *), strategic indexing on WHERE/JOIN/ORDER BY columns, transactions for related operations, query timeouts for performance, caching expensive queries, prepared statements with Bun.sql for repeated queries, and query-driven mod

2025-12-290

frontend-accessibility

TheophilusChinomona/theochinomona.tech

Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dyna

2025-12-290

global-coding-style

TheophilusChinomona/theochinomona.tech

Apply consistent coding style and formatting standards using automated tools (ESLint, Prettier, Ruff) with clear naming conventions, top-down code organization, and appropriate function/component sizing. Use this skill when writing any code in any language, naming files and variables, structuring code within files, organizing imports, configuring linters and formatters, or setting up pre-commit hooks. Apply when working on TypeScript/JavaScript files, Python files, .NET/C# files, configuration files (tsconfig.json, .prettierrc, .eslintrc), or any code that needs consistent formatting and naming. This skill ensures automated formatting with Prettier/Ruff (let tools handle it), ESLint/analyzer enforcement, TypeScript strict mode always enabled, proper naming conventions (PascalCase.tsx for React components, camelCase.ts for utilities, IPascalCase for interfaces with I prefix, PascalCase for types without prefix, camelCase for functions/constants/database fields/API endpoints/JSON keys, no underscore prefix for

2025-12-290

Source

TheophilusChinomona

TheophilusChinomona/theochinomona.tech

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

name

Frontend Components

description

Frontend Components

When to use this skill:

When creating new React components with React 19+ features
When refactoring large components into smaller ones (>300 lines)
When organizing component structure and code order (top-down readability)
When defining component props with TypeScript interfaces (IComponentProps)
When implementing state management with useState, useOptimistic, or Zustand
When using composition patterns with Shadcn/ui Slot and asChild prop
When handling conditional rendering and early returns
When using React 19 Actions API (useActionState, useFormStatus) for forms
When using the use() hook to unwrap promises in Server Components
When extracting reusable component logic into custom hooks
When working on component files (.tsx, .jsx, components/.)
When reviewing component structure for readability (scroll test)
When deciding between local state, lifted state, or global state (Zustand)
When implementing optimistic UI updates with useOptimistic

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.

Instructions

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