Frontend UI Patterns
Design skill, available on Zeplik
Frontend UI Patterns is a ready-to-run design skill on Zeplik. Not for aesthetics (use frontend-design), audits (use wcag-audit-patterns), or responsive layout (use responsive-design). Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.
The Frontend UI Patterns skill loads automatically when your request matches it, or you can invoke it directly by typing /frontend-ui-patterns in any chat. It works with attachments, connectors, and any model that supports the task, so you get the same expert method every time without setting anything up.
What the Frontend UI Patterns skill can do
- Build complete React, Vue, and Svelte components with state and styling
- Implement state management using Redux Toolkit, Zustand, Jotai, or React Query
- Write Next.js App Router server components and streaming data fetching code
- Deliver React Native, SwiftUI, and Jetpack Compose UI code with navigation and animation
Try these prompts on Zeplik
Pick a prompt to open it in the Zeplik app. If you are not signed in yet, your prompt is waiting for you the moment you do.
How the Frontend UI Patterns skill works
/frontend-ui-patterns
Umbrella skill for hands-on frontend and mobile UI engineering: component architecture, state management, CSS systems, accessibility implementation, TypeScript/JavaScript language patterns, testing, and framework-specific patterns for React, Vue, Svelte, Next.js, React Native, SwiftUI, and Jetpack Compose. The user describes what they are building or pastes the code that misbehaves; deliver working code with a short rationale. For aesthetic direction use frontend-design; for accessibility audits use wcag-audit-patterns; for breakpoint and layout strategy use responsive-design.
Dispatch table
Pick the reference file(s) that match the request, read them, then answer. Read at most 2-3 files per turn.
| Topic | Read |
|---|---|
| React/Vue/Svelte component patterns, composition, CSS-in-JS | references/web-component-design.md (+ --component-patterns.md, --css-styling-approaches.md, --accessibility-patterns.md) |
| React state management (Redux Toolkit, Zustand, Jotai, React Query) | references/react-state-management.md (+ --details.md) |
| Next.js 14+ App Router, Server Components, streaming, data fetching | references/nextjs-app-router-patterns.md (+ --details.md) |
| Upgrading React versions, class-to-hooks, concurrent features | references/react-modernization.md (+ --details.md) |
| AngularJS to Angular migration, hybrid mode | references/angular-migration.md (+ --details.md) |
| TypeScript generics, conditional/mapped types, utility types | references/typescript-advanced-types.md (+ --details.md) |
| Modern JS (ES6+, async, generators, functional patterns) | references/modern-javascript-patterns.md (+ --details.md, --advanced-patterns.md) |
| Node.js backend for full-stack apps (Express/Fastify, middleware) | references/nodejs-backend-patterns.md (+ --details.md, --advanced-patterns.md) |
| JS/TS testing (Jest, Vitest, Testing Library, mocking) | references/javascript-testing-patterns.md (+ --advanced-testing-patterns.md) |
| Tailwind CSS v4 design systems, tokens, component libraries | references/tailwind-design-system.md (+ --details.md, --advanced-patterns.md) |
| Typography, color systems, spacing, iconography tokens | references/visual-design-foundations.md (+ --typography-systems.md, --color-systems.md, --spacing-iconography.md) |
| React Native app architecture (Expo, native modules, offline sync) | references/react-native-architecture.md (+ --details.md) |
| React Native styling, navigation, Reanimated animations | references/react-native-design.md (+ --styling-patterns.md, --navigation-patterns.md, --reanimated-patterns.md, --details.md) |
| iOS design: HIG, SwiftUI views and navigation | references/mobile-ios-design.md (+ --swiftui-components.md, --hig-patterns.md, --ios-navigation.md) |
| Android design: Material 3, Jetpack Compose | references/mobile-android-design.md (+ --compose-components.md, --material3-theming.md, --android-navigation.md, --details.md) |
How to work
- Identify the framework and the concrete task (build, refactor, migrate, test, or debug). Ask one clarifying question only if the framework or target version is genuinely ambiguous.
- Read the matching reference file(s) from the table above before writing code.
- Deliver complete, runnable code in the chat -- components, hooks, styles, or tests -- not fragments with ellipses. Match the user's existing conventions when they paste code.
- State the trade-off you chose in 2-3 sentences (for example, why Zustand over Redux for this shape of state).
- Route out when the request is not implementation: visual/aesthetic direction goes to frontend-design, WCAG conformance audits to wcag-audit-patterns, breakpoint strategy to responsive-design.
Usage
/frontend-ui-patterns $ARGUMENTS
How to use the Frontend UI Patterns skill
Sign in to Zeplik
Create a free Zeplik account or sign in. New accounts start with free credits, so you can try the Frontend UI Patterns skill right away.
Describe your design task
Ask in plain language, or type /frontend-ui-patterns to invoke the skill directly. Zeplik recognizes the Frontend UI Patterns skill and applies its method.
Review and refine the result
Zeplik returns a clear, structured answer. Ask follow-ups in the same chat to refine it or take the next step.
Source and credit
- Author
- anthropic
- License
- MIT
Adapted from the open-source wshobson/agents project and tuned to run natively on Zeplik. View source on GitHub.
Frequently asked questions
- What is the Frontend UI Patterns skill?
- Frontend UI Patterns is a ready-to-run design skill on Zeplik. Not for aesthetics (use frontend-design), audits (use wcag-audit-patterns), or responsive layout (use responsive-design). Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.
- How do I use Frontend UI Patterns on Zeplik?
- Sign in to Zeplik and ask in plain language, or type /frontend-ui-patterns in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.
- Which AI model does the Frontend UI Patterns skill use?
- Any model you choose. Zeplik works across every model in one chat, so the Frontend UI Patterns skill runs on your preferred model for the task.
- Where does the Frontend UI Patterns skill come from?
- The Frontend UI Patterns skill is adapted from the open-source wshobson/agents project (MIT) and tuned to run natively on Zeplik. The original source is linked on this page.
- How much does the Frontend UI Patterns skill cost?
- Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.
Related design skills
- Accessibility ReviewUse when the user asks to audit a design or page for accessibility — "check a11y", "is this accessible?", "run a WCAG audit" — covering color contrast, keyboard navigation, focus order, touch target size, and screen reader behavior against WCAG 2.1 AA before handoff.
- Brand Guidelines BuilderUse when the user wants Anthropic's official brand look-and-feel applied to an artifact — brand colors, typography, visual formatting, company design standards. Trigger: "use Anthropic branding", "apply our brand style". Visual identity only; not for brand voice or tone in writing (use brand-voice-enforcement).
- Brand Landing PageRuns a brand interview with no established visual direction, then generates deployment-ready landing-page HTML. Not for dashboards or app UI (use frontend-design).
- Design CritiqueUse when the user shares a design, mockup, screenshot, or Figma link and asks for feedback — "review this design", "critique this mockup", "what do you think of this screen?". Gives structured feedback on usability, hierarchy, and consistency. Not for a WCAG audit (use accessibility-review).
- Design Delivery NavigatorUse to chain UI delivery across skills -- research, design, systemize, accessibility, handoff. Not for a single critique (use design-critique).
- Design Handoff PackageUse when a design is ready for engineering and the user wants a developer handoff spec — layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation details. Trigger: "write the handoff spec", "prep this design for devs", "spec this screen out".
More on Zeplik
Try Frontend UI Patterns on Zeplik
Every model, one chat. Bring the Frontend UI Patterns skill into your next conversation and let the assistant do the work.