Molveau
All guides

Agent skills6 min read

SaaS UI skills compared: Impeccable, taste, Vercel

Agent skills for building a SaaS or app UI compared: Impeccable, taste-skill, Vercel, marketingskills, shadcn, and the short saas playbook I use.

Ask a coding agent for the first screen of a SaaS and it often builds a landing page with a sidebar: a welcome hero, four equal stat cards, a chart with no units and a table of five perfect rows. Nothing is designed for the empty account, the failed request or the user who works from the keyboard. Several open skills cover parts of an app interface. For a new product I start with saas from molveau/skills, a short playbook that lists what an app needs that a marketing site does not and says in which order to apply the design skills. It holds few design rules of its own. If you want one design authority for the app and the marketing pages, Impeccable goes much deeper, and if the job is mostly dashboards, taste-skill's app-screens reference is the most detailed I have read.

The contenders

Skill Author Licence Best at Lacks
Impeccable Paul Bakaus Apache-2.0 An Operate mode for app screens, a discovery interview before code, onboarding and hardening passes Billing and pricing screens; a short path, since it is a full design system with a launcher
taste-skill, app-screens Leonxlnx MIT Dashboards, shells, dense tables, charts, settings and their states Onboarding and an order of work; its study has no phone screens and few states
web-design-guidelines Vercel MIT, per the repo's README A file:line audit of focus, forms, reduced motion, dark mode and URL state on existing code A plan for what to build; it reviews code that exists
marketingskills Corey Haines MIT Activation, signup friction, pricing tiers and upgrade screens The interface itself: no shell, tables, tokens or keyboard work
shadcn shadcn MIT Composing screens from installed shadcn/ui components with the CLI UX: states, onboarding and billing are outside its scope
saas Molveau Studio MIT What an app needs that a site does not, in order, with a done checklist Depth and scripts; it hands every step to other skills

Each one, fairly

Impeccable, by Paul Bakaus

Impeccable splits surfaces into modes, and its Operate mode is written for app UI, dashboards, admin and settings. The rule I agree with most: the product's world lends type, palette, density and one signature move, and never the layout, the navigation or the controls. A shape command interviews you and produces a brief before any code, onboard aims at first value, and harden covers overflow, errors and other locales. Install it if you want one system for the app and its marketing pages, with commands for each design move. It ships a launcher script, so it is heavier than a playbook.

taste-skill's app-screens reference, by Leonxlnx

The app-screens file inside taste-skill is a run for one app screen: an inventory, the one question the screen answers, the shell, the data, the states, then a check. It covers five shell archetypes, figures, charts, tables, forms and settings, and it lists the tells of generated dashboards. It is honest about its base, a study of 23 desktop screens with no phone screens and one settings page, and it labels the rules beyond that as house rules. Install the original if most of your work is data views. My anti-slop skill keeps a pinned copy and sends dashboards to it.

web-design-guidelines, by Vercel

Vercel's skill fetches its rules from the Web Interface Guidelines repo and reports findings as file:line: accessible names, focus states, forms, reduced motion, color-scheme for dark mode, state kept in the URL, dates and numbers through Intl. Its siblings in the same repo cover React performance and component composition. It is a review of code that exists, which makes it a good last pass on any app and a poor first step.

marketingskills, by Corey Haines

These skills are about growth more than interface. onboarding works from the minimum path to value, signup cuts friction, pricing and paywalls cover tiers and upgrade screens. They are written for founders and technical marketers. Use them when the problem is that trial users do not activate or pay, and pair them with an interface skill for the screens.

shadcn, by shadcn

The official shadcn/ui skill reads your project's components.json through the CLI and composes from what is installed: a settings page from tabs, cards and form controls, a dashboard from a sidebar, cards, a chart and a table. It keeps colours semantic and checks registries before custom code. It needs a shadcn/ui project, and it stops at components; the states and the copy are yours.

What saas adds

  • A direction gate for app screens. Five lines before any code (product, character, world, moments, signature), with moments taken from the product itself: one chart drawn with care, or the document or ticket the product handles, never a generated image. The second-order defaults are named and refused, including four equal stat cards over a bar chart as the whole home screen.
  • Nine things an app needs that a site does not. The shell and navigation, dense tables, four states per view (loading, empty, error, populated), onboarding to first value, settings, billing inside the app, dark mode on semantic tokens, keyboard and focus, and motion only as feedback.
  • An order of work. Flow first, then direction and tokens, then the shell and the densest real table, then states, then onboarding, settings and billing, then motion, and the anti-slop pass last. Each step names the skill that holds the rules: ux for copy and resilience, ui for screens and the mockup, motion for feedback, anti-slop and its detector before anything is called done.
  • A done checklist. The densest table tested with 0, 1, 200 and very long rows; the whole app usable by keyboard; both themes at AA contrast, charts and badges included; plan, usage, next charge and cancellation visible in the app; 390 px checked.
  • A small footprint, by design. One file, no script. The limit is the other side of that: installed alone, its order of work names skills your agent does not have. Install it with the Design bundle.

Install

The skill alone, with the skills CLI:

npx skills add molveau/skills -s saas

The playbooks bundle (saas, vitrine and workflow):

npx skills add molveau/skills -s saas -s vitrine -s workflow

In Claude Code, all eleven skills as one plugin:

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Every skill and bundle is on the skills page, and the source is at github.com/molveau/skills. The skills it routes to have their own comparisons: UI skills, UX and accessibility skills, anti-slop skills and agent workflow skills.

Checklist

  • The user's three main jobs and the path to first value are written before any screen.
  • The direction is five lines, approved, and the home screen is not four stat cards over a chart.
  • Every view has loading, empty, error and populated states, with a next step in each.
  • The densest table works with 0, 1, 200 and very long rows, sorting and the keyboard.
  • Billing shows the plan, usage, next charge and how to cancel, inside the app.
  • Light and dark pass AA contrast; motion is feedback only and honours reduced motion.

Stanislas Molveau

Founder, Molveau Studio

I design and build web and mobile products, and write these guides from teardowns of real apps rather than theory.

LinkedInSee my work