agentsclimarketplace

Shape product design

Skill workingclassbuddha/codexmaxxing/skills/shape-product-design

UI skills for Codex: design passes, browser automation, screenshots, responsive checks, and evidence packs.

Install
npx -y skills add workingclassbuddha/codexmaxxing --skill shape-product-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Design, critique, and polish frontend product surfaces until they feel intentional and usable. Use when Codex is asked to design, redesign, review, or improve a web app, dashboard, landing page, tool UI, mobile screen, component, visual system, or screenshot-based frontend experience, especially when layout, typography, color, interaction states, responsiveness, or product taste matter.

SKILL.md

3.1 KB, as published. Nobody here has run it

Shape Product Design

Use this skill to turn a functional surface into a product surface: clear hierarchy, domain-fit density, deliberate controls, responsive layout, and visible proof that the UI works.

Workflow

  1. Identify the product mode: operational tool, public demo, creative/game, brand page, portfolio, data dashboard, or internal console.
  2. Read existing UI code, design tokens, screenshots, routes, and component patterns before proposing changes.
  3. Name the primary user task for the screen. Optimize the first viewport around that task.
  4. Apply the design pass below.
  5. Verify with a real screenshot or browser run before calling the UI done.

Design Pass

  • Keep the first screen useful. Build the app/tool experience first; only create a marketing hero when the user clearly asked for a landing page.
  • Match the domain. Operational SaaS and admin tools should be quiet, dense, and scannable. Public demos can be more cinematic, visual, and expressive.
  • Use familiar controls: icons for tool buttons, segmented controls for modes, toggles for binary settings, sliders or inputs for numeric values, tabs for views, menus for option sets.
  • Prefer the repo's icon library, especially lucide when present. Do not hand-roll common icons.
  • Avoid nested cards and page sections styled as floating cards. Use cards for repeated items, modals, and genuinely framed tools.
  • Keep card radius at 8px or less unless the design system already says otherwise.
  • Use visual assets when the site, game, object, venue, product, person, or demo needs concrete inspection. Avoid vague atmospheric media.
  • Avoid one-note palettes. Watch for overuse of purple/purple-blue gradients, beige/sand, dark slate, brown/orange, or single-hue variations.
  • Do not add decorative orbs, bokeh blobs, or generic gradient backgrounds.
  • Use stable dimensions for boards, toolbars, tiles, counters, and fixed-format controls so hover, loading, and dynamic labels do not shift layout.
  • Make text fit inside its parent at mobile and desktop sizes. Use tighter copy, wrapping, or responsive constraints; do not scale font size with viewport width.
  • Add empty, loading, disabled, hover, focus, selected, and error states when the workflow implies them.

Implementation Checklist

  1. Scan component structure and CSS for existing conventions.
  2. Inventory colors, fonts, spacing, shadows, borders, and radii.
  3. Fix information architecture before decoration.
  4. Tune typography to container size; reserve hero-scale type for real heroes.
  5. Check mobile, tablet, and desktop widths.
  6. Capture at least one screenshot after implementation.

For a fuller review rubric, read references/design-checklist.md.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.