CA
campusway-frontend-quality
CampusWay frontend quality workflow for Vite React and Tailwind with optional Next.js surface. Use when: improve UI, refactor components, fix layout, optimize bundle, enforce design consistency, prepare frontend PR.
Install
mkdir -p .claude/skills/campusway-frontend-quality && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15156" && unzip -o skill.zip -d .claude/skills/campusway-frontend-quality && rm skill.zipInstalls to .claude/skills/campusway-frontend-quality
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
CampusWay frontend quality workflow for Vite React and Tailwind with optional Next.js surface. Use when: improve UI, refactor components, fix layout, optimize bundle, enforce design consistency, prepare frontend PR.215 chars✓ has a “when” trigger
About this skill
CampusWay Frontend Quality
Outcome
Ship polished frontend updates with consistent design, responsiveness, and build safety.
When To Use
- Create or refactor UI components.
- Improve page visuals or interaction quality.
- Fix responsive bugs and visual regressions.
Procedure
- Identify affected route and component boundaries.
- Preserve existing design tokens and theme variables first.
- Implement UI changes with accessible markup.
- Validate responsiveness:
- mobile around 360px
- tablet around 768px
- desktop 1280px+
- Run quality commands:
cd frontend && npm run lintcd frontend && npm run build
- If performance-sensitive route changed, run:
cd frontend && npm run perf:lighthouse:landing
- Capture quick before/after notes for PR context.
Decision Points
- If change includes routing data hydration with Next.js, verify in
frontend-nexttoo. - If animation adds bundle weight, review chunking impact in Vite build output.
Quality Checks
- No broken layout on key breakpoints.
- No critical accessibility regressions.
- Build output remains stable.
External Inspirations From Awesome Agent Skills
- vercel-labs/react-best-practices
- vercel-labs/web-design-guidelines
- vercel-labs/next-best-practices
- cloudflare/web-perf