# Refactorer View

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

- Skill: `majiayu000/refactorer-view` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/refactorer-view`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/refactorer-view/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: HPL3-ECO-NC-ND-A 2026
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/refactorer-view

---


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