anthropics/skills180kfrontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
Use the Appllama MCP (mcp.appllama.io) well — research real top-grossing mobile apps, their screens, flows, and UI elements, then build from what you learn. Load when the Appllama MCP is connected and the task involves building a mobile app or screen, researching app design patterns, studying onboarding/paywall/feature flows, improving an existing screen, or whenever an appllama_* / search_apps / list_app_screens tool is available. Covers the tool map, pagination, expiring media, and the full build-from-research playbooks.
把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。
读取 https://funcoding.ai/skills/appllama/appllama-skills/appllama-usage/install.md ,按里面的步骤帮我安装这个 Skill。
Appllama is the design library of top-grossing mobile apps — their real screens, flows, and UI patterns, with revenue and download context. The MCP puts that library in an agent's hands: not just a research tool, a builder's tool. You study what already wins, then you build something better.
Pair this skill with appllama-app-design-skill for every design/implementation step — this skill tells you what to study; that one tells you how to build.
get_credits — it's free. It tells you the balance,
limits, and reset date. Pro includes 1,500 credits a month (they reset in
full on the 1st, UTC); every other call spends 1 credit.next_cursor;
pass it back to continue. You cannot jump to page N — and a cursor only
works for the same query that minted it. If a cursor errors, drop it and
restart from page one.| Tool | What it gives you | Typical use |
|---|---|---|
get_credits | Balance, limits, reset date. Free. | Session start |
search_apps | 10 apps/page: name, revenue, downloads, rating, launch date, screens count, flow list with screen counts. Natural-language query + filters (revenue/downloads/rating/launch date/price/onboarding steps) + sort + board_id | Find the top apps for a category or need |
get_app | One app in full: ratings breakdown, category rank, IAP pricing, top countries, flows | Decide if an app deserves a deep study |
list_app_screens | 10 screens/page in journey order (welcome → onboarding → paywall → product), each with media URL, flow, UI elements, colors. Filter by flow or section | Walk an app screen by screen |
search_screens | Screens across the whole library. mode="keyword" matches screen names + filters (flow, screen_type, element, app_id); mode="semantic" searches by meaning/visual language | Gather design references for one screen type |
get_screen | One screen in full + up to 5 visually similar screens from other apps. Accepts screen_ref = app_id/screen_id (what appllama.io's "Copy Screen ID" produces) | The user pasted a screen ref; or drill into one reference |
list_flows | The flow taxonomy with screen/app counts | Discover what flows exist for a category |
get_flow_apps | Apps containing a flow, top revenue first | Find the best examples of one flow |
list_ui_elements | ~38 UI-element families with counts (one call) | Vocabulary for element-level research |
get_element_screens | Screens featuring an element family | Study how winners build one component |
list_my_boards | The member's own appllama.io boards (screens / apps / flows) | Find their curation first |
get_board | A board's full contents: screens with media, app profiles, or (app, flow) pairs | When the member curated a board for the task, START from it |
The screen_ref handshake: members can click "Copy Screen ID" on any
screen at appllama.io and paste it to you. It looks like
1393061654/spl_9i075 — feed it straight to
get_screen(screen_ref=...) and you're looking at exactly the screen they
mean, plus its closest siblings across the library.
| Scenario | Reference |
|---|---|
| Build an app from scratch (e.g. "build me a habit tracker") | references/build-from-scratch.md |
| Make an existing screen better | references/improve-a-screen.md |
| Flow & element research; general research method | references/research-methods.md |
Both build playbooks end the same way: the simulator loop from appllama-app-design-skill, repeated until you cannot find a flaw. Research without that loop is decoration.
When you pull screens for study, save them into a local working structure — links expire in about an hour, but your notes and downloads don't:
research/
<category>/
apps.md # the shortlist: metrics, flows, verdicts
<app-name>/
screens.md # per-screen notes: id, name, flow, elements, colors
img/ # downloaded screens, in journey order
patterns.md # cross-app synthesis: the category's design language
Download the screens as you study them — synthesis happens with the images side by side, not from metadata. Notes and screen IDs are durable; re-fetch a fresh link from the ID if you ever need the pixels again.
anthropics/skills180kGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
前端开发
anthropics/skills180kSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
前端开发
addyosmani/agent-skills103kGuides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
前端开发
addyosmani/agent-skills103kBuilds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
前端开发
addyosmani/agent-skills103kOptimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
前端开发
nexu-io/open-design100kOpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.
前端开发