skills.rest
danilonovaisv
danilonovaisvCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-vite-frontend

Implements and reviews React 19 frontend work with Vite, Tailwind CSS 4, and Motion.

1|Updated Aug 24, 2026
Search Tags:#typescript#accessibility#frontend#react#tailwind css#vite#component architecture
One-click install
npx skills add https://github.com/danilonovaisv/DAN-IMAGES-PROMPTS-2 --skill react-vite-frontend-danilonovaisv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-vite-frontend
Source: https://github.com/danilonovaisv/DAN-IMAGES-PROMPTS-2/tree/main/.agents/skills/react-vite-frontend
Command: npx skills add https://github.com/danilonovaisv/DAN-IMAGES-PROMPTS-2 --skill react-vite-frontend-danilonovaisv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend work on the DAN IMAGES PROMPTS app risks inconsistent component placement, broken reviewed-draft flows, and missed accessibility or responsive states when contributors lack shared conventions. ## Core Features & Use Cases - Structured UI Organization: Directs domain UI into src/features/ and reusable primitives into src/components/, with server calls routed through src/services/api.ts. - Reviewed-Draft Preservation: Ensures AI-generated results remain editable before saving, protecting the core prompt-review workflow. - State & Accessibility Coverage: Requires handling loading, empty, error, success, disabled, and retry states plus keyboard operation, focus behavior, labels, responsive layout, and reduced motion. - Use Case: When adding a new prompt-library filter panel, the Skill guides placement in src/features/, wires API calls through the service layer, and verifies keyboard navigation and mobile layout before completion. ## Quick Start Implement a new React component for the prompt library following the project conventions and verify it with TypeScript checks and responsive state review.

Frequently Asked Questions about react-vite-frontend

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

FAQPage Schema
How do I structure React components in a Vite frontend project?▼

Place domain-specific UI in src/features/ and reusable primitives in src/components/. Route all server communication through src/services/api.ts to keep data access centralized and components focused on presentation.

How to handle loading and error states in React components?▼

Account for loading, empty, error, success, disabled, and retry states explicitly in each component. Design each state as part of the UI rather than an afterthought, and verify them during review before considering work complete.

Does Tailwind CSS 4 work with React 19 and Vite?▼

Yes, this project combines React 19, Vite, and Tailwind CSS 4 together with Motion for animation. Reuse the existing visual language and Lucide icons rather than introducing a competing component system.

How do I verify accessibility in a React frontend?▼

Check keyboard operation, focus behavior, labels, responsive text and layout, and reduced-motion preferences. Run pnpm exec tsc --noEmit for type safety and inspect affected desktop and mobile states manually.

Why should AI-generated results stay editable before saving?▼

The reviewed-draft flow keeps users in control of AI output, since automated structuring of prompts can misidentify elements. Editable drafts let users correct subject, lighting, style, and tag fields before persisting to the library.

Related Skills

Explore More Software Engineering Skills→
ActiveMemoryActiveMemory
74

brainstorm

Transform vague ideas into validated designs through structured dialogue.

Official
Advanced
kaxuna1kaxuna1

playwright

Automate end-to-end tests for Luxia storefront checkout, cart, authentication, and multilingual routing.

Community
Intermediate
thinhtt264thinhtt264

android-accessibility

Audit Jetpack Compose UI for Android accessibility issues via prompt-driven checklists.

Community
Basic
Pancake-QPancake-Q
1

nuxt

Build full-stack Vue applications with server-side rendering and file-based routing.

Community
Advanced