agentsorg
- 44 skills
- 0 followers
- 10 hours ago last updated
- ▌ Design Engineering · agentsorg bundleLoad when reviewing UI code, designing a component or page layout, picking an easing curve or transition pattern, deciding whether something should animate at all, choosing an avatar/typography/color system, building an OKLCH palette or fixing contrast, writing UI copy or error messages, auditing for AI-default tells, code tells, or a11y misses, making a screen look less generated, consuming a project's DESIGN.md or .design tokens, writing design-system docs for agents, giving feedback through Agentation or a similar annotation tool, asking why a UI feels flat or unfinished, judging when delight earns its weight, deciding whether an interaction should make a sound, designing or generating UI sound effects (ElevenLabs or open-source), syncing sound to animation, scoring a product launch video or deriving its sound stem from the motion, cutting a multi-scene launch video so it reads as one camera move, creating or animating SVG (icons, mascots, logo reveals, video-to-vector), prototyping several directions behi
- ▌ Design · agentsorg bundleDiscover, read, follow, update, and verify AgentsORG .design living visual contracts. Use when generating or reviewing UI, restyling, extracting or remixing a design system, fixing design drift, locking tokens, or when a .design / *.design file exists. Triggers on .design, design system, brand, tokens, components, DESIGN.md, restyle, visual identity, UI generation, design drift, remix, bootstrap design, verify design, landing page, dashboard, shadcn theme, design progress, UI review, polish, craft, accessibility.
- ▌ Naive Design · agentsorgLoad when building a warm, hand-drawn 'naive design' aesthetic — childlike doodles, crayon/marker/risograph texture, lowercase friendly type, soft mascots, intentional imperfection — for branding, posters, packaging, merch, social, landing pages, onboarding, empty/404 states; when generating naive-style brand assets with image models; or when deciding whether messy-premium imperfection fits a surface (and where it must NOT go). The disciplined complement to the design-engineering skill. Encodes Amir Mušić's 2026 naive-design thread.
- ▌ A11Y · agentsorg bundleUse when a UI must work without a mouse or without sight: keyboard order, focus management, focus-visible, ARIA roles, live regions, and announcements.
- ▌ Perf · agentsorg bundleUse when a UI measurably janks or loads slowly: compositing, layout thrash, virtualization, image loading, and bundle weight. For choosing durations and curves, use `motion`.
- ▌ Color · agentsorg bundleUse when picking, converting, or repairing color values: OKLCH ramps, hue and chroma tuning, contrast ratios, P3 gamut, and semantic palette assignment.
- ▌ Forms · agentsorg bundleUse when building inputs and validation: field layout, labels, validation timing, error recovery, autofill, keyboard flow, and multi-step submission.
- ▌ Charts · agentsorg bundleUse when visualizing data: chart type choice, axes and gridlines, color encoding, sparklines, tooltips, and interpolating live-updating values.
- ▌ Layout · agentsorg bundleUse when composing a page: grid, container width, column structure, alignment, z-index layering, and where the eye lands first. Gaps and density are `spacing`.
- ▌ Motion · agentsorg bundleUse when adding or tuning one element's motion: whether to animate at all, easing curve, duration, enter/exit shape, press feedback, interruptibility. Multi-element choreography is `transitions`.
- ▌ Naming · agentsorg bundleUse when someone describes an effect or pattern without knowing its name and wants the exact term. For naming a thing, not designing or building one.
- ▌ Delight · agentsorg bundleUse when deciding whether a moment earns extra craft: the delight-impact curve, easter eggs, celebration, sound and haptics, and deliberate friction. Decides whether, not how.
- ▌ Imagery · agentsorg bundleUse when handling photos and illustration: aspect ratios, cropping, placeholders and blur-up, avatars, device frames, and dark-mode treatment.
- ▌ Spacing · agentsorg bundleUse when sizing gaps and density: the spacing scale, padding-to-gap ratios, optical alignment, section rhythm, and comfortable versus compact modes.
- ▌ UI Copy · agentsorg bundleUse when writing interface strings: button labels, error messages, empty-state text, toasts, tooltips, confirmations, and microcopy tone.
- ▌ AI Tells · agentsorg bundleUse when checking whether a UI looks machine-generated: `transition: all`, `scale(0)`, pure-black shadows, default violet gradients, uniform radii, and emoji bullets.
- ▌ Dense UI · agentsorg bundleUse when designing tables and dashboards: column alignment, tabular numerals, row density, sticky headers, bulk actions, and information per screen.
- ▌ Gestures · agentsorg bundleUse when motion follows a finger or cursor: drag, swipe-to-dismiss, sheets, momentum, velocity thresholds, rubber-banding, and interrupting a spring mid-flight.
- ▌ Surfaces · agentsorg bundleUse when defining the visual plane: elevation, shadow recipes, borders versus hairlines, corner radii, blur and translucency, and background layering.
- ▌ Dark Mode · agentsorg bundleUse when deriving or fixing a dark theme: lightness mapping, elevation by surface lightness, shadow replacement, image dimming, and pure-black bans.
- ▌ UI Polish · agentsorg bundleUse when a UI works but feels unfinished and no single dimension is obviously wrong: optical corrections, hairlines, cursors, selection, and missing interaction states.
- ▌ UI Review · agentsorg bundleUse when reviewing non-motion UI code and a Before/After/Why table plus an explicit verdict is required.
- ▌ UI States · agentsorg bundleUse when specifying non-happy-path states: empty, loading, skeleton versus spinner, error, offline, partial data, and optimistic updates.
- ▌ Navigation · agentsorg bundleUse when structuring how users move through an app: tabs, sidebars, breadcrumbs, hierarchy depth, active state, back behavior, and URL as state.
- ▌ Onboarding · agentsorg bundleUse when designing a first run: activation path, progressive disclosure, empty-state coaching over tours, permission prompts, and the first success moment.
- ▌ Responsive · agentsorg bundleUse when a layout must adapt across widths: breakpoints, fluid type and space, container queries, reflow order, and safe-area insets.
- ▌ Typography · agentsorg bundleUse when setting type: scale, weight, line-height, measure, tracking, numerals, font loading, and hierarchy carried by weight and grey instead of size.
- ▌ Iconography · agentsorg bundleUse when choosing or drawing icons: stroke weight, pixel grid, optical sizing, icon-versus-label, and morphing one icon into another.
- ▌ Native Feel · agentsorg bundleUse when web UI must pass as a native app: momentum scroll, keyboard avoidance, back gesture, platform control conventions, status bar, and PWA chrome.
- ▌ Touch Input · agentsorg bundleUse when the pointer is a finger: hit-target size, thumb reach, hover gating on touch, tap latency, scroll conflicts, and iOS Safari input quirks.
- ▌ Transitions · agentsorg bundleUse when moving between states, views, or routes: shared-element continuity, morphing, stagger, spatial direction, and page transitions. For one element's timing, use `motion`.
- ▌ Motion Audit · agentsorg bundleUse when auditing motion across an existing codebase and a prioritized fix plan is required, not a per-diff verdict.
- ▌ Pick Library · agentsorgUse ONLY when explicitly asked which library or dependency to use for a frontend task. Never invoke on your own.
- ▌ Component API · agentsorg bundleUse when designing a component's props and composition: defaults, variants, controlled versus uncontrolled, slots, and how much configuration to expose.
- ▌ Design Tokens · agentsorg bundleUse when naming or structuring theme variables: primitive vs semantic vs component tiers, CSS custom properties, Tailwind theme config, and multi-brand overrides.
- ▌ Modal Or Page · agentsorgUse when deciding where a flow lives: modal, drawer, sheet, popover, inline expand, or full page - plus dismissal, focus return, and deep-linking.
- ▌ Motion Review · agentsorg bundleUse when reviewing a diff that contains animation code and a Block or Approve verdict with a Before/After/Why table is required.
- ▌ Notifications · agentsorg bundleUse when designing notification surfaces: toasts, badges, push, inbox, frequency and batching, priority, quiet hours, and transactional email layout.
- ▌ Search Filter · agentsorg bundleUse when building search and filtering: query input, facets and chips, result ranking display, zero results, async states, and keyboard control.
- ▌ Brand Identity · agentsorg bundleUse when translating a brand into interface: accent discipline, logo usage, voice-to-visual mapping, illustration style, and keeping product UI distinct from marketing.
- ▌ Design Critique · agentsorg bundleUse when judging a rendered screen or screenshot rather than code: what to look at in what order, naming what feels wrong, and turning it into a written rule.
- ▌ Marketing Pages · agentsorg bundleUse when building a landing, pricing, or launch page: hero structure, section rhythm, social proof, scroll behavior, CTA hierarchy, and plan comparison tables.
- ▌ Prototype Variants · agentsorg bundleUse ONLY when explicitly asked to explore several directions for one interface problem. Never invoke on your own.
- ▌ Motion Opportunities · agentsorgUse when a UI feels static and you need to find where motion is missing. Proposes candidates and rejects most of them.