frontend

Implement responsive, accessible UI components from Figma designs using modern frameworks.

1|1|Updated Aug 5, 2025

Search Tags:#accessibility #frontend #react #angular #ui/ux #vue #design systems

Ready to run

npx skills add https://github.com/slantview/claude --skill frontend-slantview

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/slantview/claude/tree/main/skills/frontend
Command: npx skills add https://github.com/slantview/claude --skill frontend-slantview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the implementation of user interfaces, ensuring designs are translated into functional, accessible, and performant web components.

Core Features & Use Cases

Component Development: Create reusable UI components using modern frameworks like React, Vue, or Angular.
Design Integration: Accurately implement designs from tools like Figma, adhering to design systems.
Accessibility: Ensure compliance with WCAG 2.1 AA standards.
Use Case: Implement a new user dashboard according to a provided Figma design, ensuring it is responsive across all devices and accessible to users with disabilities.

Quick Start

Implement the user profile card component based on the provided Figma design specifications.

Frequently Asked Questions about frontend

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

FAQPage Schema

How do I implement Figma designs into accessible React components?▼

To implement Figma designs into accessible React components, this Skill translates visual specifications into functional, responsive web components while ensuring compliance with WCAG 2.1 AA standards. It integrates Figma designs directly into your modern frontend framework workflow.

Can I use this to build UI components with Vue or Angular frameworks?▼

Yes, you can use this to build UI components with Vue or Angular frameworks. This Skill supports modern frontend frameworks including React, Vue, and Angular to develop reusable, performant components that adhere to established design systems.

What's the best way to ensure WCAG 2.1 AA compliance in frontend development?▼

The best way to ensure WCAG 2.1 AA compliance in frontend development is to integrate accessibility checks during component implementation. This Skill builds accessible UIs by default, ensuring web components are responsive and usable by individuals with disabilities.

How do I create a responsive user dashboard from a Figma design?▼

To create a responsive user dashboard from a Figma design, this Skill processes the design specifications and outputs functional web components. It ensures the dashboard is responsive across all devices and adheres to accessibility best practices.

Does this frontend development approach require specific MCP server tools?▼

Yes, this frontend development approach requires adherence to specific MCP server tool usage for research and documentation. These tools are utilized during the component development process to maintain design system accuracy and implementation quality.