skills.rest
YuriiYInno
YuriiYInnoCOMMUNITY
Explore all skills by this author →
GitHub

coder-frontend

Implements frontend features using React, Vue, or Angular with component architecture and testing.

Updated Oct 2, 2025
Search Tags:#testing#accessibility#state management#frontend#react#component#implement
One-click install
npx skills add https://github.com/YuriiYInno/Innogram --skill coder-frontend-yuriiyinno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coder-frontend
Source: https://github.com/YuriiYInno/Innogram/tree/main/.codex/skills/coder-frontend
Command: npx skills add https://github.com/YuriiYInno/Innogram --skill coder-frontend-yuriiyinno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building frontend features often leads to inconsistent component structure, misplaced files, missing tests, and skipped accessibility checks. This Skill enforces a disciplined implementation workflow so frontend code lands in the right directory, follows project conventions, and passes verification before completion. ## Core Features & Use Cases - Structured Implementation Workflow: Follows a five-step process (Understand, Plan, Implement, Test, Review) with a verify-fix loop capped at three attempts before escalation. - Component & State Patterns: Provides templates for React components, custom hooks, React Query server state, Context, and design token theming. - Testing & Quality Gates: Includes component and hook test examples, accessibility checklists, and pre-completion checks for lint, build, and responsive behavior. - Use Case: Ask the AI to build a user profile card feature; it creates typed components in frontend/src/components/, writes tests, runs them, and verifies accessibility before finishing. ## Quick Start Ask the AI to implement a new React component or frontend feature and let it follow the built-in workflow from planning through tested completion.

Frequently Asked Questions about coder-frontend

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

FAQPage Schema
How do I implement a React component with proper structure?▼

Define a typed props interface, use kebab-case file naming like user-card.tsx, and colocate styles in CSS modules. The Skill provides a full template including accessibility attributes like role, tabIndex, and keyboard handlers.

What state management should I use for React server data?▼

Use React Query or SWR for server state such as API data, with useQuery for reads and useMutation for writes. Reserve useState for local UI state, Context for shared UI state, and Zustand or Redux for complex global state.

Where should frontend files be placed in a full-stack project?▼

All frontend code must go inside a frontend/ directory at the project root, never in the root itself. This prevents merge conflicts with backend code, and npm install runs inside frontend/ rather than the root.

What happens when frontend tests keep failing?▼

The Skill reads the full error output, fixes the root cause, and re-runs tests up to three times. If tests still fail after three attempts, it escalates to a debugger skill instead of completing with failing tests.

Does this workflow cover accessibility requirements?▼

Yes, it includes an accessibility checklist covering semantic HTML, ARIA labels, keyboard navigation, focus management, WCAG AA color contrast, and reduced motion support. These checks run before the task is marked complete.

Related Skills

Explore More Software Engineering Skills→
RIVO-NoordRIVO-Noord

mockup-forge

Generate UI mockups from wireframes, screen designs, or Excel tables.

Official
Advanced
signalbeam-iosignalbeam-io
2

code-review

Identify security, architecture, and quality issues in code changes against origin/main.

Official
Advanced
pecorapromotionsllc-cellpecorapromotionsllc-cell

browser-testing-with-devtools

Test UI components in real browsers using Chrome DevTools MCP.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate