# Krishna-Modi12 > Open-source publisher. Listings imported from github.com/Krishna-Modi12 — credited to the original author with their license. - **Listings:** 20 - **Total installs:** 0 - **Profile:** https://agentstack.voostack.com/s/krishna-modi12 - **Website:** https://github.com/Krishna-Modi12 ## Published listings - [React Components](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-react-components) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-react-components` Reusable React component APIs — buttons, cards, modals, tabs, dropdowns, shadcn/Radix primitives, compound components. Use when building or refining a single reusable component or a small family of them — button, card, modal, dropdown, tabs, accordion, tooltip, badge, avatar, select, popover — or when the request mentions shadcn/ui, Radix, compound components, forwardRef, CVA or asChild. Not for… - [Platform](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-platform) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-platform` Platform surfaces — mobile/PWA, desktop, React Native, i18n, SEO/metadata, payments, transactional email, AI chat UI. Use when the work targets a platform surface rather than a generic component — mobile and PWA patterns, desktop and Electron/Tauri conventions, React Native/Expo, internationalization and RTL, SEO and metadata, Stripe payments, transactional email, AI chat and streaming UI. - [Agent Ops](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-agent-ops) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-agent-ops` Agent operating discipline — token budgeting, cross-session memory, self-improvement loops, self-verification, parallel work, and subagent orchestration. Use when the work is the agent's own process rather than the UI it produces — deciding what to load, persisting a correction so it sticks, verifying a change before reporting done, or dispatching subagents. Not for building dashboards or persist… - [Frontend Design Pro](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-frontend-design-pro) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-frontend-design-pro` > - [Ai Ui Generation](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-ai-ui-generation) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-ai-ui-generation` Prompt-to-UI, JSON-to-UI and generative-interface patterns — component registries, schema validation, and the guardrails generated markup must pass. Use when building or consuming AI-generated UI — prompt-to-component scaffolding, schema-driven or server-driven rendering, a chat surface that renders components rather than prose — or when reviewing model-generated markup before it ships. - [Design Research](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-design-research) — Skill · Free — `agentstack add skill-krishna-modi12-frontend-design-pro-design-research` Live web research protocol — browse component libraries, design galleries and motion sites, extract palettes, spacing, easing and interaction models, and convert them into typed constraints before any code is written. Use when the user points outward — "inspired by", "like this site", a mood board, a pasted URL, or a named source (Dribbble, Mobbin, Aceternity, 21st). Turns a reference into constr… - [Animations](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-animations) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-animations` Motion — easing and timing rules, Framer Motion, GSAP, scroll-driven experiences, view transitions, reduced motion. Use when something has to move — entrances and exits, micro-interactions, hover states, scroll-driven sequences, parallax, route transitions, shared-element morphs, stagger, marquees, physics-based movement. - [Testing](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-testing) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-testing` Component testing — Vitest, Testing Library, jest-axe, Playwright e2e, Storybook stories, mock policy. Use when writing or augmenting tests — unit and interaction tests, accessibility assertions, end-to-end flows, Storybook stories, test setup and mocking — or when a component has been delivered without coverage. - [Color Themes](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-color-themes) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-color-themes` Algorithmic colour theme generation in OKLCH — harmonic schemes, palettes derived from an image, dark/light/auto architecture, and contrast checked before a token ships rather than after. Use when the palette is computed rather than chosen — generating a token set from one brand hue, deriving colours from an image, building a theme switcher, returning harmonic schemes from a function. Not for app… - [Component Patterns](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-component-patterns) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-component-patterns` Patterns from modern component libraries — animated text, wrapper effects, ambient backgrounds, and composed UI, with the accessibility and performance rules they usually omit. Use when pulling a pattern from a third-party library — animated text, magnetic/tilt/spotlight effects, ambient backgrounds, carousels, docks, bento grids — or when asked for "something like Aceternity, React Bits or Cult… - [Iconography](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-iconography) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-iconography` Icon systems — sizing, weight matching, colour inheritance, hit areas, SVG accessibility, and avatar patterns. Use when selecting, sizing, colouring or aligning icons, building icon-only controls, choosing a family or weight, or working on avatars, initials and empty-state illustration — anything where an SVG sits next to or instead of text. - [React Performance](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-react-performance) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-react-performance` React/Next.js performance — waterfalls, bundle size, RSC, memoization, rendering, virtualization, Core Web Vitals. Use when the complaint is speed or the task is an audit — slow pages, request waterfalls, oversized bundles, unnecessary re-renders, long lists, Core Web Vitals, Server Component boundaries, lazy loading, prefetching. - [Canvas Typography](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-canvas-typography) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-canvas-typography` Generative and kinetic typography — particle text, scramble and decode effects, text on a path, and variable-font axis animation. Canvas 2D and CSS, with the accessible text always in the DOM. Use when the type itself is the effect — letters assembling from particles, a headline decoding character by character, words on a curve, a weight axis moving with scroll. Not for choosing a typeface or a s… - [Data Tables](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-data-tables) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-data-tables` Tables, grids, charts and dashboards — sorting, filtering, pagination, selection, KPIs, data fetching. Use when the UI is tabular or data-dense — data tables, lists, grids, pagination, sorting, filtering, row selection, KPI cards, charts, analytics dashboards, admin panels. TanStack Table or Query route here. - [Landing Pages](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-landing-pages) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-landing-pages` Marketing pages — heroes, pricing, testimonials, bento grids, social proof, CTAs, empty states, onboarding. Use when building a full marketing or product page and its sections — hero, features, pricing, testimonials, logo wall, comparison table, FAQ, CTA bar, footer — plus empty states and onboarding. Not for a single reusable component (react-components). - [Design System](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-design-system) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-design-system` Design tokens, OKLCH palettes, typography scales, spacing, theming, dark mode, brand systems, Figma handoff. Use when the token system itself is the work — palettes, type and spacing scales, theming and dark mode, brand-inspired aesthetics, font pairing, Figma-to-code translation. Not for applying tokens inside one component (react-components). - [Forms](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-forms) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-forms` Forms and auth — validation, RHF + Zod, error states, checkout, login/signup, OTP/MFA, payments. Use when the UI collects input — contact, newsletter, checkout, login, signup, password reset, OTP/MFA, multi-step wizards, settings panels. React Hook Form, Zod, aria-describedby or Stripe PaymentElement route here. - [Web Interface](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-web-interface) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-web-interface` UI review and audit — Vercel Web Interface Guidelines, copywriting, typography detail, contrast, touch targets, safe areas. Use when auditing or polishing existing UI rather than building new — design review, accessibility audit, copy review, typography and contrast passes, "make this feel more finished", "what's wrong with this component". - [Design Principles](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-design-principles) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-design-principles` UX laws and design reasoning — cognitive load, Gestalt grouping, Fitts/Hick/Miller, visual hierarchy, and extracting a visual identity into a reusable spec. Use when deciding why a layout should be one way rather than another, or justifying a critique — hierarchy, grouping, spacing rationale, nav structure, cognitive load, perceived performance — and when matching an existing visual identity. Not… - [Threejs 3d](https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-threejs-3d) — Skill · Free · security-reviewed — `agentstack add skill-krishna-modi12-frontend-design-pro-threejs-3d` 3D web experiences with React Three Fiber — scenes, geometry, materials, lighting, shaders, post-processing, model loading, raycasting. Use when anything is 3D in the browser — scenes, GLTF/GLB models, shaders, WebGL, post-processing, orbit and camera controls, raycasting and object selection, Spline embeds, particle systems, 3D heroes. --- Seller on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Install any with `agentstack add `.