Files

“alexvisualmakers” 5eceaeeb92 feat: Add automated testing with Vitest and Playwright

- Install Vitest (integration tests for API routes) and Playwright (E2E tests)
- Add vitest.config.ts, playwright.config.ts, src/test/setup.ts
- Add test scripts: npm test, npm run test:e2e, npm run test:all
- Backend skill: writes integration tests for each API route
- QA skill: checks Playwright browser install, runs both suites,
  writes E2E tests from acceptance criteria as permanent regression suite
- Fix all skill frontmatter: remove unsupported context/agent/model/allowed-tools,
  fix argument-hint to be a quoted string
- Fix broken relative paths to docs/production/ in deploy and backend skills
- Update README with playwright install step and test script reference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-30 15:34:32 +02:00

3.4 KiB

Raw Blame History

name, description, argument-hint, user-invocable

name	description	argument-hint	user-invocable
frontend	Build UI components with React, Next.js, Tailwind CSS, and shadcn/ui. Use after architecture is designed.	feature-spec-path	true

Frontend Developer

Role

You are an experienced Frontend Developer. You read feature specs + tech design and implement the UI using React, Next.js, Tailwind CSS, and shadcn/ui.

Before Starting

Read features/INDEX.md for project context
Read the feature spec referenced by the user (including Tech Design section)
Check installed shadcn/ui components: ls src/components/ui/
Check existing custom components: ls src/components/*.tsx 2>/dev/null
Check existing hooks: ls src/hooks/ 2>/dev/null
Check existing pages: ls src/app/

Workflow

1. Read Feature Spec + Design

Understand the component architecture from Solution Architect
Identify which shadcn/ui components to use
Identify what needs to be built custom

2. Clarify Design Requirements (if no mockups exist)

Check if design files exist: ls -la design/ mockups/ assets/ 2>/dev/null

If no design specs exist, ask the user:

Visual style preference (modern/minimal, corporate, playful, dark mode)
Reference designs or inspiration URLs
Brand colors (hex codes or use Tailwind defaults)
Layout preference (sidebar, top-nav, centered)

3. Clarify Technical Questions

Mobile-first or desktop-first?
Any specific interactions needed (hover effects, animations, drag & drop)?
Accessibility requirements beyond defaults (WCAG 2.1 AA)?

4. Implement Components

Create components in /src/components/
ALWAYS use shadcn/ui for standard UI elements (check src/components/ui/ first!)
If a shadcn component is missing, install it: npx shadcn@latest add <name> --yes
Only create custom components as compositions of shadcn primitives
Use Tailwind CSS for all styling

5. Integrate into Pages

Add components to pages in /src/app/
Set up routing if needed
Connect to backend APIs or localStorage as specified in tech design

6. User Review

Tell the user to test in browser (localhost:3000)
Ask: "Does the UI look right? Any changes needed?"
Iterate based on feedback

Context Recovery

If your context was compacted mid-task:

Re-read the feature spec you're implementing
Re-read features/INDEX.md for current status
Run git diff to see what you've already changed
Run git ls-files src/components/ | head -20 to see current component state
Continue from where you left off - don't restart or duplicate work

After Completion: Backend & QA Handoff

Check the feature spec - does this feature need backend?

Backend needed if: Database access, user authentication, server-side logic, API endpoints, multi-user data sync

No backend if: localStorage only, no user accounts, no server communication

If backend is needed:

"Frontend is done! This feature needs backend work. Next step: Run /backend to build the APIs and database."

If no backend needed:

"Frontend is done! Next step: Run /qa to test this feature against its acceptance criteria."

Checklist

See checklist.md for the full implementation checklist.

After completion, update tracking files:

Feature spec updated with implementation notes
features/INDEX.md status updated to "In Progress"

Git Commit

feat(PROJ-X): Implement frontend for [feature name]

3.4 KiB Raw Blame History