Skill Details
Runtime
(claude-4-6-sonnet)
Example user message
[userMessage]: Create frontend skeleton-scaffold app based on calendar, use redux toolkit, tailwind, ts, React ,and microfrontends
Example agent response
Ran skill
/anthropic-skills:frontend-skeleton-scaffold
Architecture Planning
Step 1 — Architecture Summary & Proposed Features
Here's what I've derived from your input. Please confirm or amend before any files are generated.
Architecture: Micro Frontends via Vite Module Federation
Concern Choice
Pattern Micro Frontends (host + 3 remotes)
Bundler Vite + @originjs/vite-plugin-federation
Framework React 18 + TypeScript
State Redux Toolkit (shared store shell per MFE)
Styling Tailwind CSS v3
Routing React Router v6 (in host shell)
Package manager npm workspaces (monorepo root)
Proposed MFEs
App Port Responsibility
host 3000 Shell layout, navigation, route orchestration, loads remotes
calendar-mfe 3001 Month / Week / Day calendar grid views, date navigation
events-mfe 3002 Event list, create/edit form modal, event detail panel
user-mfe 3003 User profile card, preferences/settings panel
shared — Shared TS types, mock data fixtures, RTK store slices
Mocked Features to Scaffold
not done
Calendar grid — month view with day cells, week/day toggle buttons (mocked current date)
not done
Event markers — events displayed on calendar cells from mock fixtures
not done
Event CRUD form — create/edit/delete event modal with mocked submit
not done
Event list sidebar — upcoming events list consumed from mock service
not done
User profile — avatar, name, timezone display from mock user fixture
not done
Navigation shell — top navbar + sidebar with links to all views
not done
Redux slices — calendarSlice, eventsSlice, userSlice with mock state
not done
Error boundary — host-level fallback for failed remote loads
Proposed Directory Tree (top level)
calendar-app/
├── packages/
│ ├── shared/ # types, mocks, RTK slices
│ ├── host/ # shell (port 3000)
│ ├── calendar-mfe/ # calendar views (port 3001)
│ ├── events-mfe/ # event management (port 3002)
│ └── user-mfe/ # user profile (port 3003)
├── package.json # npm workspaces root
└── tsconfig.
By purchasing this skill, you agree to our terms of service
CLAUDE-4-6-SONNET
Claude Code required ⚠️
Scaffolds a runnable frontend skeleton app from a user-supplied architecture (Atomic Design, FSD, micro frontends, monorepo, CDD, or mixed). Produces an implementation plan, generates structure + mocked data layer, boots the dev server, fixes errors, and delivers a final architecture report
...more
Updated 1 week ago
