campusway-frontend-quality
Quality-focused workflow for refining React/Tailwind frontend components.
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.Key capabilities
- →Create or refactor UI components
- →Improve page visuals or interaction quality
- →Fix responsive bugs and visual regressions
- →Validate responsiveness across mobile, tablet, and desktop breakpoints
- →Run frontend linting and build commands
- →Capture before/after notes for PR context
How it works
This skill outlines a procedure for implementing UI changes, validating responsiveness, and running quality commands to ensure design consistency and build stability.
Inputs & outputs
When to use campusway-frontend-quality
- →Refactor UI components
- →Improve responsive layout
- →Run frontend quality checks
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
When not to use it
- →When the project does not use Vite React and Tailwind
- →When the changes do not involve UI improvements or refactoring
- →When the task is not related to enforcing design consistency
Limitations
- →If routing data hydration is involved with Next.js, verification in `frontend-next` is required
- →If animation adds bundle weight, chunking impact in Vite build output needs review
- →The skill does not automatically fix broken layouts or accessibility regressions
How it compares
This workflow integrates specific quality checks and responsiveness validation into the development process, ensuring consistent design and build safety beyond basic UI implementation.
Compared to similar skills
campusway-frontend-quality side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| campusway-frontend-quality (this skill) | 0 | 4mo | No flags | Intermediate |
| retro-css-architecture | 1 | 7mo | No flags | Beginner |
| UI Engineer | 0 | 6mo | No flags | Intermediate |
| ui-styling | 12 | 9mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by md-muntasir-shihab
View all by md-muntasir-shihab →You might also like
retro-css-architecture
TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
UI Engineer
vinay-veerappa
Specialized skill for building modern, high-performance web UIs using Next.js, Tailwind, and Shadcn/UI.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.