Design
8 tools, 30 skills
FigmaInterface design and handoffVisitMobbin MCPReal app flows as referenceVisitCleanShot XScreenshots and recordingsVisitRectangleWindow snappingVisitRaycastLauncher and clipboardVisitFramerSites and quick prototypesVisitFuserThe AI canvas I design inVisitAre.naCollecting referencesVisitemil-design-engPolish, component design and the invisible details that make software feel greatVisitemil-animateBuilds an animation in the order of decisions that make it feel rightVisitemil-break-uiFeeds a component worst-case data and reports everything that brokeVisitemil-mobile-nativeThe CSS and meta-tag fixes that make a web app feel installed on a phoneVisitbetter-interfaceRuns every better-* skill as one reviewVisitbetter-uiSurfaces, icons and motion: radius, optical alignment, shadows, icon statesVisitbetter-typographyType scale, spacing, font features, wrapping and punctuationVisitbetter-colorsPalettes, semantic tokens, format conversion and contrastVisitbetter-layoutGrouping, alignment, reading order and responsive structureVisitbetter-accessibilityKeyboard, focus, ARIA, forms and motion against WCAG 2.2Visitbetter-writingInterface copy, from labels and errors to empty statesVisitbreakStress-tests one component under every scenario that can reach itVisitstate-machineRenders every state of a component with a switcherVisitvariantBuilds several variants in the real page to pick fromVisitbuild-designBuilds UI from Figma or an image with the project's own tokensVisitexplain-interfaceExplains how a site, effect or animation was builtVisitinterface-reviewReviews a branch or PR for interface regressionsVisitgustavo-fior-craftThe full Craft collection, from hover states to data detailsVisitgustavo-typographyTabular numbers and optical alignmentVisitgustavo-colorGrain to hide banding, and outlines for imagesVisitgustavo-layoutNested border radius and the HTML backgroundVisitgustavo-motionHover restraint: the more frequent, the less animationVisitraphael-skillReviews animation, CSS, audio, typography and UX patternsVisitraphael-agentsThe full wiki text behind each ruleVisitinterfaces-synthesis24 rules to enforce and a review sentenceVisitinterfaces-practicalDesigning with code, guidelines and anti-patternsVisitinterfaces-thinkingA critic mindset for judging whether work earns its costVisitinterfaces-bookmarksThe references behind each ruleVisittransitions-devReady transitions for menus, modals, toasts, tabs and moreVisittransitions-polishTunes existing motion against the token scaleVisit