skills.rest
echoVic
echoVicCOMMUNITY
Explore all skills by this author →
Website𝕏@echo_vicGitHub

frontend/component-development

Guides frontend component development covering design principles, state management, styling, and testing.

553|50|Updated Jan 10, 2026
Search Tags:#Frontend#Testing#component development# accessibility#State management#API Contract#Design tokens
One-click install
npx skills add https://github.com/echoVic/boss-skill --skill frontend-component-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend/component-development
Source: https://github.com/echoVic/boss-skill/tree/main/skill/skills/frontend/component-development
Command: npx skills add https://github.com/echoVic/boss-skill --skill frontend-component-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend developers often lack a consistent methodology when building components, leading to poor reusability, inconsistent styling, missing accessibility attributes, and insufficient test coverage. This Skill provides a structured methodology for designing, implementing, and testing frontend components.

Core Features & Use Cases

  • Component Design Principles: Enforces single-responsibility, reusability via props and slots, and consistent PascalCase naming conventions.
  • State & API Contract Management: Classifies local, shared, server, and URL state with appropriate management strategies, and aligns API calls with architecture.md endpoint definitions including mock strategies.
  • Design Token Integration: Reads ui-design.json tokens, pages, and prototype links to derive CSS variables, layouts, and navigation flows.
  • Testing Pyramid: Defines unit (70%), integration (20%), and mandatory E2E (10%) test coverage with concrete checklists.
  • Use Case: When implementing a new user profile page, follow this methodology to read the UI design spec, build reusable components with proper state management, wire up API calls per the architecture contract, and ship with full test coverage.

Quick Start

Use the frontend component development methodology to implement the user profile page components based on the ui-design.json and architecture.md in this project.

Frequently Asked Questions about frontend/component-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure reusable frontend components?▼

Follow the single-responsibility principle by splitting complex components into container components for logic and presentational components for UI. Make components configurable through props with sensible defaults, and support slots or children for extension.

How to manage state in frontend component development?▼

Classify state into four types: local state with useState or ref, shared state via Context or stores, server state with query libraries or SWR, and URL state through the router. Lift state only to the nearest common parent to avoid unnecessary re-renders.

How do I convert design tokens from ui-design.json into CSS?▼

Read the tokens section of ui-design.json and map values like colors into CSS variables or a theme object, for example --color-primary. Then derive page structure from pages and frames, and implement navigation from prototype links.

What test coverage should frontend components have?▼

Follow the testing pyramid: 70% unit tests with Jest and Testing Library, 20% integration tests for component interaction and state changes, and 10% mandatory E2E tests with Playwright or Cypress covering create, edit, delete, and list flows.

How do I handle API calls when the backend is not ready?▼

Create mock API modules based on the endpoint definitions in architecture.md section 5. Return realistic mock data matching the contract types, then swap the mock module for the real API layer once the backend is available.

Related Skills

Explore More Software Engineering Skills→
mrpersimmonmrpersimmon

ui-design

Generate frontend UI design specifications for web pages and mini-program interfaces.

Community
Advanced
cncorpcncorp

test-runner

Run ruff, lint, and parallel mocked, e2e-live, and smoke tests.

Official
Intermediate
moking55moking55

map-api-backend-to-fontend

Map backend API endpoints to Next.js frontend hooks and types.

Community
Intermediate
partme-aipartme-ai
610

modao

Provides guidance for creating interactive prototypes and managing component libraries in Modao.

Official
Basic