frontend-architecture
A portable, framework-agnostic React/React Native architecture style: feature modules with page directories, barrel-only imports, server-vs-UI state split, and component-promotion rules.
Source: Stareezy
At a glance
- Best for
- Scaffolding a new React/Next.js/Vite/Expo app with a scalable structure
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Deciding where a component, hook, or piece of state should live
- Source
- stareezy-1/frontend-architecture-skill
01 / Understand the skill
About frontend-architecture
A portable, framework-agnostic architecture style for any React or React Native frontend. Organizes apps into feature modules with page/screen directories, a strict server-state vs UI-state split, barrel-only cross-module imports, co-located styles, and clear component-promotion rules. State-management agnostic (Zustand, Redux Toolkit, MobX, Jotai, Valtio, or Context). Styling agnostic (Tailwind, CSS Modules, Tamagui, StyleSheet, styled-components). Use this skill when scaffolding a new app, adding a feature or module, deciding where a component, hook, or piece of state should live, naming types and interfaces, or reviewing folder structure and import boundaries. Works with Next.js App Router, React + Vite SPA, Remix, and Expo / React Native.
A portable, framework-agnostic architecture style for any React or React Native frontend. Organizes apps into feature modules with page/screen directories, a strict server-state vs UI-state split, barrel-only cross-module imports, co-located styles, and clear component-promotion rules.
Read full description
A portable, framework-agnostic architecture style for any React or React Native frontend. Organizes apps into feature modules with page/screen directories, a strict server-state vs UI-state split, barrel-only cross-module imports, co-located styles, and clear component-promotion rules. State-management agnostic (Zustand, Redux Toolkit, MobX, Jotai, Valtio, or Context). Styling agnostic (Tailwind, CSS Modules, Tamagui, StyleSheet, styled-components). Use this skill when scaffolding a new app, adding a feature or module, deciding where a component, hook, or piece of state should live, naming types and interfaces, or reviewing folder structure and import boundaries. Works with Next.js App Router, React + Vite SPA, Remix, and Expo / React Native.
02 / Confirm the fit
Use frontend-architecture when you need to
- Scaffolding a new React/Next.js/Vite/Expo app with a scalable structure
- Deciding where a component, hook, or piece of state should live
- Enforcing barrel imports and a server-vs-UI state split
- Reviewing folder structure and import boundaries
03 / See the workflow
How frontend-architecture works
- 01Install: npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-architecture
- 02Try: Scaffold a billing feature module following this architecture in my Next.js app.
- 03Get: A module with pages, barrel, store, and README placed per the promotion rules.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Scaffolding a new React/Next.js/Vite/Expo app with a scalable structure
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Stareezy
Ready to add frontend-architecture?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-architecture
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.