skills.rest
brabos-ai
brabos-aiOFFICIAL
Explore all skills by this author →
GitHub

add-frontend-development

Guide frontend development with stack-agnostic architecture and type safety.

8|2|Updated Mar 2, 2026
Search Tags:#development#architecture#state management#frontend#data fetching#ux
One-click install
npx skills add https://github.com/brabos-ai/code-addiction --skill add-frontend-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-frontend-development
Source: https://github.com/brabos-ai/code-addiction/tree/main/framwork/.codeadd/skills/add-frontend-development
Command: npx skills add https://github.com/brabos-ai/code-addiction --skill add-frontend-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive, stack-agnostic framework for building robust and maintainable frontend applications, ensuring consistency and adherence to best practices across different technologies.

Core Features & Use Cases

  • Architecture Guidance: Offers a clear structure for organizing frontend code, including pages, components, state management, and data fetching.
  • UX Integration: Mandates adherence to UX design specifications, either from a design.md file or the ux-design skill, ensuring a user-friendly interface.
  • Type Safety: Enforces strict typing by mirroring backend DTOs and using schema-based validation for forms.
  • Performance Optimization: Recommends strategies like lazy loading and bundle size monitoring.
  • Use Case: When developing a new feature that involves user interaction and data display, this skill guides the developer through setting up the necessary components, fetching data, managing state, and ensuring the UI aligns with design specifications.

Quick Start

Use the add-frontend-development skill to structure the frontend code for a new user profile page, ensuring it integrates with the existing design system and data fetching patterns.

Frequently Asked Questions about add-frontend-development

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

FAQPage Schema
How do I structure frontend architecture for state management and data fetching?▼

Frontend architecture structure requires organizing pages, components, state management, and data fetching layers. This framework provides a stack-agnostic approach to ensure maintainable code organization and consistent data flow across your application.

What is the best way to enforce type safety when mirroring backend DTOs in frontend development?▼

Type safety in frontend development is enforced by strictly mirroring backend DTOs and using schema-based validation for forms. This approach guarantees data integrity between your client and server while preventing runtime type errors.

How do I integrate UX design specifications into a new frontend feature?▼

UX design integration involves adhering to specifications from a `design.md` file or the `ux-design` skill during implementation. This ensures the user interface aligns with design principles while building pages and components.

Can I use this frontend development framework with any technology stack?▼

Yes, you can use this stack-agnostic framework with any technology stack. It guides implementation of pages, components, data fetching, and routing according to your project-specific stack configurations without enforcing a specific library.

What strategies help optimize frontend performance and monitor bundle size?▼

Frontend performance optimization strategies include implementing lazy loading and monitoring bundle size. These techniques reduce initial load times and ensure the application remains responsive as new features are added.

Related Skills

Explore More Software Engineering Skills→
omni-system-creatoromni-system-creator
16

add-api

Scaffold OMS backend API endpoints with DTOs, OrgId-scoped services, and controllers.

Community
Advanced
M-Abdullah07M-Abdullah07
1

full-stack-orchestration-full-stack-feature

Coordinate multi-disciplinary teams to deliver full-stack features with API-first contracts.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

frontend-patterns

Standardize React API integration patterns for data fetching and state management.

Community
Intermediate
berkcangumusisikberkcangumusisik
11

component-gen

Generate typed props, tests, and stories for React, Vue, or Svelte components.

Community
Intermediate