skills.rest
slantview
slantviewCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/slantview/claude --skill frontend-slantview
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
devkenidevkeni
1

figma-implement-design

Translate Figma designs into frontend code using Figma MCP workflows and design tokens.

Community
Advanced
qte77qte77
2

auditing-website-accessibility

Audit websites and web apps for WCAG 2.1 AA accessibility compliance and actionable remediation guidance.

Community
Intermediate
Adelie-SquadAdelie-Squad
17

creative-frontend

Develop reusable UI components with design-system tokens across React, Vue, and Angular.

Official
Advanced
AdamBienAdamBien
46

web-static

Build static websites with semantic HTML and CSS without dependencies.

Community
Intermediate