skills.rest
andrew-tucker-razorvision
andrew-tucker-razorvisionCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design frontend UI/UX with responsive layouts and WCAG accessibility.

Updated Aug 23, 2026
Search Tags:#design#accessibility#UI#UX#responsive#brand
One-click install
npx skills add https://github.com/andrew-tucker-razorvision/EFT-Tracker --skill frontend-design-andrew-tucker-razorvision
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/andrew-tucker-razorvision/EFT-Tracker/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/andrew-tucker-razorvision/EFT-Tracker --skill frontend-design-andrew-tucker-razorvision

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Establishes UI/UX and component design patterns aligned with RazorVision brand guidelines; ensures responsive, accessible, and consistent interfaces.

Core Features & Use Cases

  • Page Design: Layouts, hero, navigation
  • Component Design: Buttons, forms, tables
  • Accessibility & Brand Alignment: WCAG, brand colors, typography

Quick Start

Design the login page following RazorVision color system and typography. Use brand tokens: primary color #43B6E7, font-family 'Raleway'.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design responsive web layouts that work across devices?▼

Responsive design adapts page layouts, component sizing, and typography across breakpoints using CSS variables and flexible grids. This Skill applies mobile-first approaches, semantic HTML, and brand-aligned styling to ensure consistent interfaces on all screen sizes while maintaining accessibility and performance.

What's the best way to ensure my website meets WCAG accessibility standards?▼

WCAG accessibility requires semantic HTML, keyboard navigation, color contrast, and proper ARIA labels. This Skill delivers accessible components, animations, and brand-consistent color systems that satisfy level AA standards while preserving visual design and responsive behavior.

How do I create UI components that align with brand guidelines?▼

Brand-aligned component design uses centralized color systems, typography tokens, and CSS variables to enforce consistency across buttons, forms, tables, and layouts. This Skill applies RazorVision brand tokens and patterns, reducing design drift and enabling scalable, maintainable interfaces.

Can I use this for redesigning existing interfaces to be mobile-friendly?▼

Yes. This Skill handles interface redesigns by applying mobile-first layouts, responsive breakpoints, and accessibility refinements to existing pages and components. It delivers visual updates, improved navigation, and enhanced animations while preserving brand identity and semantic structure.

What animations and visual refinements does this Skill support?▼

Performant, accessible animations enhance user experience without compromising load time or assistive technology compatibility. This Skill delivers motion effects, transitions, and visual polish aligned with brand guidelines and WCAG standards for keyboard and screen-reader users.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
vh2224vh2224
3

forge-responsive

Audit responsive CSS strategies and generate WCAG 2.2 and CWV compliance fixes.

Community
Advanced
pau-vegapau-vega

tailwind-design-system

Provides Tailwind 4 CSS theming and reusable UI components for building design systems.

Community
Advanced
MesferAliMesferAli

crewai-multi-agent

Orchestrate role-based AI agents with sequential or hierarchical workflows.

Community
Advanced