refactorer-view
A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.
Best use case
refactorer-view is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.
Teams using refactorer-view should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/refactorer-view/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How refactorer-view Compares
| Feature / Agent | refactorer-view | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
A front end staff engineer and UX designer, who refactors and simplifies the user interfaces with the best of user experience patterns.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
Task: Run the code-simplifier:code-simplifier agent against the `src/app`, `src/views`, 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
Related Skills
tasks-code-review
Use for QUICK PR reviews with structured checklists (architecture, patterns, security, performance). Provides step-by-step review process, git diff commands, and review report templates. Best for pull request reviews and pre-commit checks. NOT for deep refactoring analysis (use code-review instead).
staged-changes-review
Checklist-driven review of staged Git changes with deterministic rule scanning and semantic analysis. Use when the user wants to review staged changes, check for errors before commit, or validate code quality before committing.
sop-code-review
Comprehensive code review workflow coordinating quality, security, performance, and documentation reviewers. 4-hour timeline for thorough multi-agent review.
software-code-review
Use when reviewing code, pull requests, or diffs. Provides patterns, checklists, and templates for systematic code review with a focus on correctness, security, readability, performance, and maintainability.
skill-code-review
Perform thorough, constructive code reviews focusing on correctness, security, maintainability, and best practices
semgrep-coderabbit-review
Two-stage code review combining fast pattern detection (Semgrep) with AI-powered semantic analysis (CodeRabbit)
security-review
Performs security reviews of Hone code using OWASP guidelines. Use when reviewing database queries, CSV import logic, API endpoints, authentication, encryption, or when the user asks about security.
reviewing-python-architecture
Review ADRs to check they follow testing principles and parent PDR constraints. Use when reviewing ADRs or architecture decisions.
review-implementation
Use after hyperpowers:executing-plans completes all tasks - verifies implementation against bd spec, all success criteria met, anti-patterns avoided
review-fix
Read the latest code review, plan fixes for all findings, then execute the fixes — all in one command. Produces a dated plan and execution log in .reviews/.
review-changes
[Review & Quality] Review all uncommitted changes before commit
review-architecture
Verify DDD patterns, Clean Architecture boundaries, and bITdevKit-specific conventions in modular monolith projects