visual-development-skill
Visual Development Workflow
When developing or modifying any visual element (components, pages, layouts, styling), you must visually verify your work using Playwright screenshots and Compodium. Do not rely on code alone for UI changes.
Setup
- Start the dev server in the background:
bun run dev - Wait for the server to be ready (listen on
localhost:3000or the next available port)
Verifying Pages and Layouts
Use Playwright to screenshot full pages after making changes:
npx playwright screenshot --wait-for-timeout=3000 http://localhost:3000/your-page /tmp/screenshot.png
Then read the screenshot with the Read tool to visually inspect the result.
- Always screenshot the page after each meaningful visual change (layout shifts, new sections, styling updates)
- For dark mode, append
?dark=trueor toggle via the app and take a second screenshot - For responsive design, use
--viewport-size=375,812(mobile) and--viewport-size=1280,720(desktop)
Verifying Individual Components
Use Compodium to preview components in isolation at http://localhost:3000/__compodium__/devtools.
Screenshot the Compodium renderer to inspect a specific component:
npx playwright screenshot --wait-for-timeout=3000 "http://localhost:3000/__compodium__/devtools" /tmp/compodium.png
Compodium auto-discovers all components in app/components/ — no stories needed.
Iteration Loop
- Make a visual change (template, styles, component props)
- Screenshot the affected page or component
- Read the screenshot to verify the result
- If it doesn't look right, adjust and repeat
- Only move on when the visual output matches the intent
Key Flags
| Flag | Purpose |
|---|---|
--wait-for-timeout=3000 |
Wait for hydration/rendering |
--viewport-size=375,812 |
Mobile viewport |
--viewport-size=1280,720 |
Desktop viewport |
--full-page |
Capture entire scrollable page |
--color-scheme dark |
Force dark color scheme |
More from ralphcrisostomo/nuxt-development-skills
ralph
Convert PRDs to prd.json format for the Ralph autonomous agent system. Use when you have an existing PRD and need to convert it to Ralph's JSON format. Triggers on: convert this prd, turn this into ralph format, create prd.json from this, ralph json.
52prd
Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out.
39optimise-claude
Use when auditing, trimming, or restructuring AI instruction files (CLAUDE.md, SKILL.md, AGENTS.md) to reduce context-window consumption. Trigger whenever CLAUDE.md is bloated or Claude ignores instructions, a SKILL.md exceeds 120 lines, skills share duplicated content, AGENTS.md has large inline blocks, or the user asks to optimize, slim down, or reduce token usage.
37nuxt-init
Use when scaffolding a new Nuxt 4 project with standard config files (prettier, eslint, gitignore, husky, vitest, tsconfig, sops) and bun scripts.
33nuxt-terraform
Scaffold Nuxt + AWS Terraform infrastructure. Use when adding GraphQL resolvers, Lambda functions, initializing a new project with AppSync, DynamoDB, Cognito, writing Terraform tests, or generating/reviewing Terraform code style. Triggers on: add graphql resolver, create lambda, scaffold terraform, init terraform, add appsync resolver, add mutation, add query, add terraform test, write tftest, terraform style.
32todo
Use when scanning a codebase for incomplete work and maintaining a living TODO.md grouped by feature. Triggers on: scan for todos, find incomplete work, update todo, what needs doing, create todo list.
30