메뉴
Frontend engineering methodology — component architecture, state management, API integration, responsive layout, client-side performance, and frontend testing patterns. Framework agnostic, focused on web frontend implementation.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
The craft of being a Chief of Staff — gatekeeping, force multiplication, executive briefing, organizational sensing, institutional memory, and meeting/calendar triage. Provides the frameworks and templates that make an executive more effective by managing their capacity, information flow, and decision surface.
Use when designing, operating, reviewing, or improving production reliability with SLOs, incident command, observability, error budgets, and operational excellence.
Use when exploring adjacent ideas, overlooked angles, or lateral research paths without prematurely collapsing into a single answer.
Shared decision-making and governance methodology for all C-suite profiles. Covers decision frameworks (RAPID, DACI, decision matrices, pre-mortems, red-teaming), strategic thinking patterns (inversion, first principles, second-order effects), stakeholder communication (executive summaries, board decks, strategy memos), and governance frameworks (risk appetite, delegation levels, escalation paths).
CFO methodology for unit economics, financial modeling, pricing strategy, fundraising, budget frameworks, and SaaS metrics. Covers CAC/LTV/payback analysis, revenue projections, cost structures, runway analysis, scenario planning, value-based pricing, cap tables, term sheets, zero-based budgeting, rolling forecasts, ARR/MRR, churn, NDR, Rule of 40, and Magic Number.
CMO methodology — positioning and messaging frameworks (April Dunford's positioning, message hierarchy), customer acquisition strategy (paid, organic, PLG, SLG), brand architecture (brand house vs house of brands), growth modeling (CAC/LTV by channel, cohort analysis), market entry strategy (beachhead, land-and-expand), competitive response (pricing wars, feature races, brand defense).
| name | frontend-engineering |
| description | Frontend engineering methodology — component architecture, state management, API integration, responsive layout, client-side performance, and frontend testing patterns. Framework agnostic, focused on web frontend implementation. |
| version | 1.1.0 |
| author | Hermes Agent community |
| license | MIT |
| metadata | {"hermes":{"tags":["frontend","web","ui","components","state-management","performance","javascript","typescript","responsive","testing"],"related_skills":["ux-design","technical-architect","qa-methodology","brand-designer"]}} |
Frontend engineering is the craft of building the user-facing layer of applications — components, state management, API integration, responsive layout, and client-side performance. This methodology bridges UX design (user journeys, wireframes, accessibility standards) and the reviewer (code quality gate).
| You own | You don't own |
|---|---|
| Component implementation — UI component composition, props/state interfaces, rendering patterns, lifecycle | User journeys, wireframes, accessibility standards, interaction design — that's the ux-designer |
| State management — client-side state architecture, data fetching patterns, caching, optimistic updates | API contract design — that's the technical-architect |
| API integration — frontend-to-backend data flow, auth flows (OAuth, JWT), real-time updates | Test strategy and automation — that's the QA-engineer |
| Responsive design implementation — layout systems, breakpoints, cross-device testing | Visual identity and brand guidelines — that's the brand-designer |
| Client-side performance — bundle optimization, lazy loading, Core Web Vitals, render optimization | Editorial content and copy — that's the writer |
| Frontend testing — component tests, integration tests, visual regression, accessibility tests | Code review and quality gates — that's the reviewer |
| Build tooling — bundler config, TypeScript config, linting, formatting, dev environment | CI/CD pipeline infrastructure — that's the platform-engineer |
| Reference | When to load |
|---|---|
references/component-architecture.md | Designing component trees — composition patterns, props/state interfaces, lifecycle, accessibility fundamentals |
references/state-management.md | Choosing and implementing state management — client vs server state, data fetching, caching, optimistic updates |
references/api-integration.md | Connecting frontend to backend — API client design, auth token flow, error handling in the UI, real-time subscriptions |
references/responsive-layout-testing.md | Implementing responsive designs (layout system selection — Grid vs Flexbox vs Container Queries, breakpoint strategies, cross-device testing methodology) and testing frontend code (component testing with Testing Library, integration testing with Playwright/Cypress, visual regression, accessibility testing with axe-core and Lighthouse CI, test data management) |
references/performance.md | Optimizing client-side performance — Core Web Vitals, bundle analysis, code splitting, render optimization |
Components are the unit of composition, not pages — Design and build components as reusable, composable units. Pages are assembled from components, not built as monoliths. A well-designed component can be reused in contexts its creator never imagined.
Co-locate state with the components that need it — Not every piece of state belongs in a global store. Local state stays local. Server state is fetched and cached. Only truly shared application state belongs in a global context.
Design for every state, not just the happy path — Every data-dependent component has at least four states: loading, empty, error, and success. Designing for all four is not a nicety — it creates a resilient user experience.
Accessibility is not a feature, it's a requirement — Keyboard navigation, screen reader support, color contrast, and focus management are not enhancements. They are part of the implementation contract.
Performance is a UX concern — Every millisecond of load time, every layout shift, every janky interaction erodes user trust. Performance budgeting, bundle analysis, and render optimization are part of frontend engineering, not an afterthought.
