skills.rest
HoaiAn0906
HoaiAn0906COMMUNITY
Explore all skills by this author →
GitHub

frontend-engineer

Implement responsive React 18+ interfaces with TypeScript, Tailwind CSS, and Beads task tracking.

Updated Aug 27, 2026
Search Tags:#typescript#testing#ui#frontend#react#tailwind#api-integration
One-click install
npx skills add https://github.com/HoaiAn0906/Anki --skill frontend-engineer-hoaian0906
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/HoaiAn0906/Anki/tree/main/.cursor/skills/frontend-engineer
Command: npx skills add https://github.com/HoaiAn0906/Anki --skill frontend-engineer-hoaian0906

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive blueprint for building scalable, accessible, and maintainable frontend interfaces, aligning design-to-implementation workflows and enforcing disciplined task tracking via Beads.

Core Features & Use Cases

  • Role Identity: Defines a frontend engineering profile with a clear tech stack (React 18+, Next.js 14+, TypeScript, Tailwind CSS) and testing tools (Jest, React Testing Library, Playwright) to streamline team workflows.
  • Operational Workflow: Includes mandatory Beads task tracking and a standardized task lifecycle to ensure visibility, accountability, and progress logging.
  • Guidance & Quality: Provides best practices for component architecture, state management, API integration, responsiveness, accessibility, and testing to deliver consistent, production-ready UI.
  • Use Case: For dashboards or lesson-player UI requiring responsive layouts, API integration, and automated testing across devices.

Quick Start

Scaffold a React+TypeScript project with Tailwind, then implement reusable UI components following the Beads workflow.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema
How do I build accessible UI components with React and TypeScript?▼

Build accessible UI components with React and TypeScript by applying React 18+, Next.js 14+, and Tailwind CSS to implement responsive state and styling across desktop and mobile scenarios.

What is the best way to set up automated testing for Next.js applications?▼

Set up automated testing for Next.js applications by ensuring tests with Jest, React Testing Library, and Playwright to verify component logic and end-to-end browser interactions across devices.

How do I integrate APIs into a Next.js frontend?▼

Integrate APIs into a Next.js frontend by identifying API requirements and delivering responsive interfaces using TypeScript, ensuring state management and seamless data fetching across desktop and mobile.

Does this frontend workflow support Tailwind CSS for responsive layouts?▼

Yes, this frontend workflow applies Tailwind CSS to implement UI, state, and styling across desktop and mobile scenarios, ensuring responsive layouts and accessible interfaces are delivered consistently.

What testing tools do I need for a React 18 component library?▼

For a React 18 component library, you need Jest, React Testing Library, and Playwright to ensure comprehensive testing across responsive UI components and accessible interfaces.

Related Skills

Explore More Software Engineering Skills→
Chris-MaskeyChris-Maskey

shadcn-ui

Integrate shadcn/ui components into React and Next.js projects with Tailwind CSS.

Community
Intermediate
monch1962monch1962
3

frontend-patterns

Provides reusable React and Next.js frontend patterns for UI architecture.

Community
Intermediate
BellaBeBellaBe
37

frontend-api-connector

Generate typed API clients connecting Next.js App Router pages to backend endpoints with loading and error states.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced