메뉴
Use when designing or building modern web applications in JavaScript/TypeScript (SPA/SSR/SSG/ISR/RSC): architecture trade-offs, state/data patterns, performance, testing, delivery, and team scaling.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ratacat/claude-skills --skill modern-web-app-architecture명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Run comprehensive agent-native architecture review with scored principles
Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>
Use this agent when you need to create or update README files following the Ankane-style template for Ruby gems. This includes writing concise documentation with imperative voice, keeping sentences under 15 words, organizing sections in the standard order (Installation, Quick Start, Usage, etc.), and ensuring proper formatting with single-purpose code fences and minimal prose. Examples: <example>Context: User is creating documentation for a new Ruby gem. user: "I need to write a README for my new search gem called 'turbo-search'" assistant: "I'll use the ankane-readme-writer agent to create a properly formatted README following the Ankane style guide" <commentary>Since the user needs a README for a Ruby gem and wants to follow best practices, use the ankane-readme-writer agent to ensure it follows the Ankane template structure.</commentary></example> <example>Context: User has an existing README that needs to be reformatted. user: "Can you update my gem's README to follow the Ankane style?" assistant: "Let...
SKILL.md 표시 중
| name | modern-web-app-architecture |
| description | Use when designing or building modern web applications in JavaScript/TypeScript (SPA/SSR/SSG/ISR/RSC): architecture trade-offs, state/data patterns, performance, testing, delivery, and team scaling. |
Comprehensive guidance for designing and building modern web applications (including SPAs and hybrid rendering apps). This skill emphasizes trade-offs, explicit boundaries, and production-ready practices (performance, accessibility, security, testing, delivery).
Core principle: Everything in architecture is a trade-off. There are no "right" answers, only least-worst combinations for your specific context.
When activated, work in this order:
If the user can’t answer a question, state reasonable assumptions and continue (don’t block).
| Topic | When to Load |
|---|---|
| @references/design-patterns.md | Implementing JS patterns (Module, Observer, Factory, etc.) |
| @references/react-patterns.md | React components, hooks, state, composition |
| @references/spa-fundamentals.md | SPA architecture, routing, module organization |
| @references/micro-frontends.md | Scaling teams, independent deployments |
| @references/performance.md | Bundle size, loading, Core Web Vitals |
| @references/architecture-decisions.md | Trade-offs, coupling, fitness functions |
| @references/rendering-strategies.md | CSR vs SSR vs SSG vs ISR vs RSC |
| @references/state-management.md | Local, global, server state patterns |
| @references/security-and-auth.md | Auth choices, token storage, XSS/CSRF, CSP, API boundaries |
| @references/accessibility-and-i18n.md | WCAG basics, SPA focus mgmt, inclusive components, i18n pitfalls |
| @references/testing-and-quality.md | Testing strategy, CI quality gates, a11y checks, contract tests |
| @references/tooling-and-delivery.md | Bundling, environments, deployment, observability, feature flags |
Project Requirements?
├─ SEO critical + dynamic content → SSR (or SSR+streaming)
├─ SEO critical + mostly static → SSG/ISR (or hybrid)
├─ Mostly behind auth + app-like UX → CSR SPA (or hybrid with pre-rendered shell)
├─ Mixed (marketing + app) → Hybrid/Islands (route-level strategy)
│
Team Size?
├─ <5 developers → Modular monolith SPA
├─ 5-15 developers → Well-structured SPA or Service-based
├─ >15 developers, multiple teams → Consider micro-frontends
│
Domain Complexity?
├─ Simple CRUD → Layered architecture
├─ Complex workflows → Domain-partitioned (DDD)
├─ Multiple bounded contexts → Micro-frontends
Depending on the user request, aim to output:
| Pattern | Use When |
|---|---|
| Container/Presentational | Separating data from UI |
| Compound Components | Building composable APIs (Select, Menu) |
| Hooks | Sharing stateful logic without HOCs |
| Provider | Avoiding prop drilling for global data |
| Approach | Use When |
|---|---|
| useState/useReducer | Local component state |
| Context | Theme, auth, low-frequency global state |
| Zustand/Jotai | Simple global state, minimal boilerplate |
| Redux Toolkit | Complex state, time-travel debugging |
| React Query/SWR | Server state, caching, background refresh |
| XState | Complex flows with explicit state machines |
| Technique | Impact |
|---|---|
| Code splitting | Reduce initial bundle |
| Lazy loading | Defer non-critical |
| React.memo | Prevent unnecessary re-renders |
| useMemo/useCallback | Stable references |
| Virtual lists | Handle large datasets |
| Characteristic | Questions to Ask |
|---|---|
| Scalability | How many concurrent users? Growth rate? |
| Performance | What's acceptable TTI? LCP target? |
| Deployability | How often do you ship? Independent deploys? |
| Testability | How easy to verify changes? |
| Maintainability | What's the expected lifespan? |
| Modularity | How often do requirements change? |
| Anti-pattern | Problem | Fix |
|---|---|---|
| Prop drilling | Tight coupling | Context or state management |
| God components | Too many responsibilities | Split by concern |
| Premature optimization | Complexity without evidence | Profile first |
| Shared mutable state | Race conditions, bugs | Immutable patterns |
| Monolithic bundle | Slow initial load | Code splitting |
| Over-fetching | Wasted bandwidth | GraphQL or BFF |
| LocalStorage tokens by default | XSS turns into account takeover | Prefer httpOnly cookies + CSP (see security refs) |
| Global store for server data | Cache invalidation pain | Use React Query/SWR for server state |
Budgets must be calibrated to your users/devices, but these are good starting points for a “fast by default” app:
| Metric | Target | Needs Work |
|---|---|---|
| LCP | <2.5s | 2.5–4s |
| INP | <200ms | 200–500ms |
| CLS | <0.1 | 0.1–0.25 |
| TTFB | <800ms | 800ms–1.8s |
| Route JS (initial) | <170KB gzip | <300KB gzip |
Synthesized from:
SOC 직업 분류 기준