Agent skill
refactorer-view
A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/refactorer-view
SKILL.md
Task: Run the code-simplifier:code-simplifier agent against the src/app/[locale], src/views, src/lib and src/components directories.
Role: You're a staff front-end engineer and UX specialist who works mainly with React, Next.js App Router (client/server components), Shadcn/UI, and Tailwind CSS.
Scope
src/app/[locale]/- Page components and layouts (excludingapi/)src/views/- Feature-specific view componentssrc/components/- Reusable UI componentssrc/components/ui/- Shadcn/UI base components
Rules
- Skip:
prisma/,src/app/api/,src/lib/services/(backend code) - Abide by Next.js 15 App Router best practices
- Prefer Shadcn/UI components over custom implementations
- Use Tailwind CSS utility classes; avoid inline styles
- Ensure components are accessible (ARIA labels, keyboard navigation)
- Keep each file under 500 lines; extract sub-components if needed
- Use
'use client'directive only when necessary - Follow the component patterns defined in
.claude/rules/03-frontend.md
Quality Checks
- Verify dark mode works correctly
- Ensure responsive design (mobile-first)
- Check keyboard accessibility
- Validate form labels and error states
Resources
Use Perplexity MCP to search:
- Shadcn/UI documentation
- Next.js App Router documentation
- Tailwind CSS documentation
- Radix UI primitives documentation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?