Frontend Feature Architecture

Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Arthurblaya/frontend-feature-architecture --skill frontend-feature-architecture

Manual install

git clone --depth 1 https://github.com/Arthurblaya/frontend-feature-architecture.git /tmp/frontend-feature-architecture
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-feature-architecture/. ~/.claude/skills/frontend-feature-architecture

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Frontend Feature Architecture

Organize code around the product capabilities it implements. Keep each feature's UI,
rules, state, validation, and data access together; keep reusable foundations separate;
use the application layer to compose them. Apply this to the project's existing
language, framework, platform, and tooling.

## Required reading

Before making architectural decisions, read
[architecture](references/architecture.md) for ownership and file placement and
[boundaries](references/boundaries.md) for dependency rules and integration.
Then read only the resources needed for the current request:

| Request | Read |
| --- | --- |
| Add or extend a feature | [Feature workflow](references/feature-workflow.md) |
| Resolve a placement or integration ambiguity | Relevant case in [examples](references/examples.md) |
| Move an existing project toward this structure | [Migration](references/migration.md) |
| Review architecture or finish an implementation | [Review](references/review.md) |
| Check original claims, provenance, or known source exceptions | [Sources](references/sources.md) |

Resolve these paths relative to this skill's directory. The skill works offline;
source links are attribution, not required runtime dependencies.

## Core rules

1. **Assign ownership before choosing a directory.** A feature is a cohesive product
   capability, not a file type, route, database table, or individual UI element.

Read the full skill on GitHub

Details

Skill name: frontend-feature-architecture
Repository: Arthurblaya/frontend-feature-architecture
License: MIT
Repo updated: 9 October 2026

FAQ

What does the Frontend Feature Architecture skill do?

How do I install the Frontend Feature Architecture skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Arthurblaya/frontend-feature-architecture --skill frontend-feature-architecture. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Feature Architecture popular?

It lives in Arthurblaya/frontend-feature-architecture, which has 5 GitHub stars and 0 forks.

Related skills

HTML Skill Effectiveness

YardonYan/html-skill-effectiveness

Generates self-contained single-file HTML artifacts — visually polished, zero dependencies, openable straight in a browser. Covers 13 layout patterns, a 5-dimension critique system and DevLoop iteration, under 7 enforceable craft rules (anti-ai-slop, color, typography, hierarchy, animation, accessibility, laws-of-ux) plus state-coverage and form-validation contracts. Use when the user asks for a report, comparison, dashboard, slide deck or interactive explainer delivered as one HTML file. NOT for auth, payment, backend logic or real-time database scenarios — refuse and inform the user in those

Frontend & Design

Figma to Roblox UI

xtrair/figma-to-roblox-ui

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

Frontend & Design

Lean Canvas Coach

xntj-ai/lean-canvas-coach

交互式教练：用教练式提问带一位创始人/老板走完一张「精益画布」(Lean Canvas 9 格)，然后揪出那个最要命的「关键假设」，再帮他设计一个「最低成本验证」去先验它。不是做一次就完——支持每月/每周把新情况丢进来「重跑」，看关键假设变没变。三模式：interview(我访谈你→画布→关键假设→最低成本验证)、rerun(拿旧画布+新情况→重跑更新)、script(我出提问脚本你自己填)。是**会做功课的教练**——每一格你答完，我都补一手(调研核实/起草候选/先立后破地质疑/点破框架坑)，跟你共创，不把画布的活儿全压给你；不是只会问的问卷机，也不是空表让你自己填。 Use when: 用户要做商业模式分析/精益画布/lean canvas、说"帮我理一理这门生意""我这想法到底成不成""最大的风险在哪""帮我做个商业画布""访谈我出画布"、或已有画布要重跑更新。 NOT for: 写商业计划书/BP 全文、纯财务建模、个人IP定位(用 ip-canvas-coach)、写单篇文案(用 voice-dna / luo-restyle)。

Frontend & Design

Deslopify

AntonioSpagnol/UI-Deslopify-Skill

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

Frontend & Design

Logo Intro

CJ10110425/logo-intro

Build an animated WebGL logo intro from a brand's SVG logo. The mark arrives from a lens-warped, colour-fringed close-up, the wordmark pulls out of it, a gradient bloom grows, a lock-in beat (a badge pops, two parts snap together, inner layers rise, or the mark spins) sends out a ring, and a shimmer sweeps the logo. Outputs a single HTML file, an embeddable site splash, or an MP4/WebM video. Use when someone asks for a logo animation, brand intro, opening/splash animation for a website, an intro video like ElevenLabs', or to animate a specific company's logo.

Frontend & Design

Design Review

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.