skills.rest
clark-neitzel
clark-neitzelCOMMUNITY
Explore all skills by this author →
GitHub

03-arquitetura-frontend

Enforce React, Vite, and TailwindCSS frontend standards for directory structure and components.

Updated Feb 10, 2026
Search Tags:#architecture#frontend#api#react#ui/ux#mobile#tailwind
One-click install
npx skills add https://github.com/clark-neitzel/cahardt --skill 03-arquitetura-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 03-arquitetura-frontend
Source: https://github.com/clark-neitzel/cahardt/tree/main/.agent/skills/03-arquitetura-frontend
Command: npx skills add https://github.com/clark-neitzel/cahardt --skill 03-arquitetura-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide to the frontend and mobile architecture, ensuring consistency, scalability, and adherence to best practices in UI development.

Core Features & Use Cases

  • React & TailwindCSS Standards: Defines project structure, component patterns, and styling guidelines.
  • API Integration Best Practices: Enforces centralized API URL configuration using environment variables.
  • Responsive Design: Mandates a mobile-first approach with dual rendering for tables and cards.
  • Visual Theme: Specifies color palettes, typography, and standard UI components.
  • Authentication Context: Details the available functions for permission checking and user data refreshing.

Quick Start

Consult the frontend architecture rules before creating new React Screens, Hooks, Tailwind components, or scalable mobile views.

Frequently Asked Questions about 03-arquitetura-frontend

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

FAQPage Schema
How do I structure a React project with TailwindCSS for scalable frontend architecture?▼

Scalable frontend architecture with React and TailwindCSS requires a governed directory structure, standardized component patterns, and centralized visual theming. This ensures consistency and maintainability across your application's UI components and screens.

What is the best way to configure API integration in a Vite and React application?▼

API integration best practices in React and Vite mandate using centralized API URL configuration via environment variables. This approach keeps API service integration organized, scalable, and maintainable across different development environments.

How do I implement responsive design tables and cards for mobile-first applications?▼

Mobile-first responsive design mandates dual rendering for tables and cards. This approach ensures your UI adapts appropriately to different screen sizes, providing an optimized viewing experience across both mobile and desktop devices.

Can I use an authentication context to manage user permissions in React?▼

Yes, you can use an authentication context in React to manage user permissions. It provides available functions specifically for permission checking and refreshing user data, ensuring secure and consistent access control across your application.

What UI components and typography standards are included in a frontend visual theme?▼

A frontend visual theme specifies standard color palettes, typography rules, and standard UI components. Defining these visual standards ensures a consistent, cohesive design language throughout all React and TailwindCSS interfaces.

Related Skills

Explore More Software Engineering Skills→
RinKhimeraRinKhimera
2

convex-quickstart

Initialize and configure a Convex backend for frontend projects.

Community
Intermediate
weebcoder101weebcoder101
3

frontend

Provide React frontend development guidelines for component architecture, state management, and TailwindCSS styling.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
BEE-CODEDBEE-CODED
1

frontend-standards

Define frontend development standards for component architecture, accessibility, and responsive design.

Official
Intermediate