Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →langfuse/frontend-large-feature-architecture
Architect large or state-heavy Langfuse frontend features.
Passed 19 of 22 test cases with the skill, and 11 of 22 without it.
and 14 more in the full report
9 fixed11 passed either way2 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
I have a bloated React component (`UserProfileForm.tsx`) that fetches user settings from an API, manages loading spinners, and syncs fetched data into local form state using multiple `useEffect` hooks. Can you refactor this file into a clean, modern frontend architecture? Please provide the updated component code separated into logical files for rendering, state handling, and action functions.
| Checked | Without skill | With skill |
|---|---|---|
| Outer component handles data fetching and renders loading UI while request is pending | Missed | Passed |
| Inner component receives fetched data through an initialValue prop to initialize form state | Missed | Passed |
| Form component is rendered only after initial data fetching has completed | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill when building, changing, or refactoring a large frontend surface.
In this skill, "controller" means a component or hook that owns feature logic: data fetching, view state, table/list state, effects, actions, and expensive rendering. The problem is not the name; it is one place owning too many changing responsibilities.
When a feature grows, split rendering from logic. Most components should be view-only. Data preparation should be pure. Complex user actions should live in external async functions or local-store actions. Effects are integration boundaries, not the normal way to derive state.
For the full rules, read
references/big-feature-rules.md.
UI is a pure function of state. Do not use useEffect to derive, prepare, or
sync data:
const title = data?.name ?? ""),
never mirrored into state by an effect. Client state that refers to server
data stores only the user's intent (an id) and derives the effective value
by merging with query data in render.<Spinner /> as minimal fallback); the inner component receives
the loaded value as an initialValue prop and seeds useState(initialValue).
Do not render UI before its data is ready.useCallback/useMemo are premature optimization; fix re-render problems by
splitting components, not memoizing.test cases passed, vs 11 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.