refactorer-view

A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.

Stars 163

Forks 31

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 (excluding api/)
src/views/ - Feature-specific view components
src/components/ - Reusable UI components
src/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