skills.rest
masrurimz
masrurimzCOMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Implement production-grade UI components using existing libraries across React, Vue, Svelte, and Tailwind.

Updated Jan 11, 2026
Search Tags:#ui#accessibility#frontend#react#component#tailwind
One-click install
npx skills add https://github.com/masrurimz/amp-sisyphus --skill frontend-engineer-masrurimz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/masrurimz/amp-sisyphus/tree/main/skills/frontend-engineer
Command: npx skills add https://github.com/masrurimz/amp-sisyphus --skill frontend-engineer-masrurimz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to deliver production-grade user interfaces with pixel-perfect precision, ensuring consistency, accessibility, and performance across projects using established UI libraries.

Core Features & Use Cases

  • Library-first development: Leverage existing UI primitives (Shadcn, Radix, MUI) to avoid reinventing components.
  • Accessibility-centric: Built-in WCAG AA considerations and keyboard usability.
  • Cross-framework guidance: Applicable to React, Vue, Svelte, and Tailwind-based projects.

Quick Start

Use this skill to implement a new UI component by following existing library patterns; start by identifying the design tokens and existing component patterns in your project and create a reusable component that adheres to the project's UI standards.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I build pixel-perfect UI components using existing React libraries?▼

To build pixel-perfect UI components, identify your project's design tokens and existing library patterns, then construct reusable components adhering to established UI standards like Shadcn or MUI.

Does this frontend approach support Vue and Svelte projects?▼

Yes, this frontend approach supports cross-framework development across React, Vue, and Svelte projects, applying consistent styling and accessibility guidelines throughout your component creation process.

How do I ensure my Tailwind components meet WCAG AA accessibility standards?▼

Ensure Tailwind components meet WCAG AA standards by enforcing built-in accessibility considerations and keyboard usability during the component creation and styling process.

What is the best way to implement micro-interactions without reinventing UI primitives?▼

The best way to implement micro-interactions is through library-first development, leveraging existing UI primitives from libraries like Radix or MUI rather than building custom solutions from scratch.

Can I use this method to apply responsive layouts to existing project patterns?▼

Yes, you can use this method to apply responsive layouts by following your project's existing structure and documentation patterns while maintaining pixel-perfect precision across various screen sizes.

When should I avoid using Shadcn or MUI for component creation?▼

You should avoid using Shadcn or MUI for component creation if your project lacks established design tokens or if your application requires highly customized UI primitives outside standard library patterns.

Related Skills

Explore More Software Engineering Skills→
Andrej1601Andrej1601

tailwindcss-framework-integration

Configure Tailwind CSS across React, Vue, and Next.js projects.

Community
Intermediate
NVIDIANVIDIA
33

accessibility

Automate accessibility audits for web components using ESLint and axe-core.

Official
Advanced
thapaliyabikendrathapaliyabikendra
24

react-development-patterns

Extract React 18+ development patterns for type-safe, accessible UI components.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic