fec-accessibility-chec…
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels,…
@bovinphangInstall SkillDevelopment
Skill
/fec-tdd-workflow
Use when implementing new observable frontend behavior or fixing a behavior-changing bug where a failing test can describe the missing or incorrect behavior first. Apply to components, hooks/composables, utilities, API clients, route guards, or user workflows; pure
Claude Code
$ npx -y skills add bovinphang/frontend-craft --skill fec-tdd-workflow --agent claude-code
Codex
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a codex -y
Cursor
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a cursor -y
Gemini CLI
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a gemini-cli -y
GitHub Copilot
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a github-copilot -y
OpenCode
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a opencode -y
Windsurf
$ npx skills add bovinphang/frontend-craft --skill fec-tdd-workflow -a windsurf -y
SKILL.md
fec-tdd-workflow.SKILL.mdname: fec-tdd-workflow
description: Use when implementing new observable frontend behavior or fixing a behavior-changing bug where a failing test can describe the missing or incorrect behavior first. Apply to components, hooks/composables, utilities, API clients, route guards, or user workflows; pure behavior-preserving refactoring uses an already-green contract instead.
Frontend test-driven development
Follow the [common TDD method](references/common/tdd.md). Use RED → GREEN → REFACTOR for new behavior and GREEN → REFACTOR → GREEN for pure structural refactoring.
Frontend observable contracts
User-visible UI, component props/emits, hook/composable return values, route guards, API client output/errors, events, side effects and asynchronous states.
Frontend test selection
| Risk | Preferred validation | | --- | --- | | utils, schemas, state calculations | Unit tests | | hooks/composables | Unit or lightweight integration | | Component props, emits, interactions and states | Existing Testing Library / Vue Test Utils component tests | | Router, Provider and Store collaboration | Lightweight integration | | Cross-page login, payment, permission and CRUD journeys | Existing Playwright/Cypress E2E |
Select the closest meaningful layer: pure permission logic does not require E2E merely because it is permission-related. Keep existing frameworks and report observed red/green evidence and coverage boundaries through the common method.
Read more
name: fec-tdd-workflow description: Use when implementing new observable frontend behavior or fixing a behavior-changing bug where a failing test can describe the missing or incorrect behavior first. Apply to components, hooks/composables, utilities, API clients, route guards, or user workflows; pure behavior-preserving refactoring uses an already-green contract instead.
Frontend test-driven development
Follow the [common TDD method](references/common/tdd.md). Use RED → GREEN → REFACTOR for new behavior and GREEN → REFACTOR → GREEN for pure structural refactoring.
Frontend observable contracts
User-visible UI, component props/emits, hook/composable return values, route guards, API client output/errors, events, side effects and asynchronous states.
Frontend test selection
| Risk | Preferred validation | | --- | --- | | utils, schemas, state calculations | Unit tests | | hooks/composables | Unit or lightweight integration | | Component props, emits, interactions and states | Existing Testing Library / Vue Test Utils component tests | | Router, Provider and Store collaboration | Lightweight integration | | Cross-page login, payment, permission and CRUD journeys | Existing Playwright/Cypress E2E |
Select the closest meaningful layer: pure permission logic does not require E2E merely because it is permission-related. Keep existing frameworks and report observed red/green evidence and coverage boundaries through the common method.
Stats
23
Stars
3
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
Ships withfrontend-craft
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
2256 skills14 agents6 MCP
Stars on GitHub
Momentum
- stars in total
- 22
Other skills on frontend-craft.
@bovinphangInstall Skillfec-alchemy
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices…
@bovinphangInstall Skillfec-api-integration
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client…
@bovinphangInstall Skillfec-backend-requiremen…
Use when frontend work needs to communicate data, action, state, permission, validation, or business-rule needs to backend teams…
@bovinphangInstall Skillfec-browser-storage
Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client…
@bovinphangInstall Skillfec-canvas-threejs
Use when building or reviewing Canvas 2D, Three.js/WebGL, React Three Fiber, GLSL shaders, ShaderToy-to-WebGL adaptation, 2D/3D…
@bovinphangInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about fec-tdd-workflow.
- Which coding agents can use fec-tdd-workflow?
- fec-tdd-workflow installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.