← all publishers

Krishna-Modi12

@krishna-modi12 source repo

Report this profile Claim this profile

• 20 skills
• 0 followers
• 7 hours ago last updated

1. ▌
   Frontend Design Pro · krishna-modi12 bundle

   Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.
   0
   installs
2. ▌
   Forms · krishna-modi12 bundle

   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.
   0
   installs
3. ▌
   Testing · krishna-modi12 bundle

   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.
   0
   installs
4. ▌
   Platform · krishna-modi12 bundle

   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.
   0
   installs
5. ▌
   Agent Ops · krishna-modi12 bundle

   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 persistence UI.
   0
   installs
6. ▌
   Animations · krishna-modi12 bundle

   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.
   0
   installs
7. ▌
   Threejs 3d · krishna-modi12 bundle

   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.
   0
   installs
8. ▌
   Data Tables · krishna-modi12 bundle

   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.
   0
   installs
9. ▌
   Iconography · krishna-modi12 bundle

   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.
   0
   installs
10. ▌
    Color Themes · krishna-modi12 bundle

    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 applying a palette that already exists (design-system).
    0
    installs
11. ▌
    Design System · krishna-modi12 bundle

    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).
    0
    installs
12. ▌
    Landing Pages · krishna-modi12 bundle

    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).
    0
    installs
13. ▌
    Web Interface · krishna-modi12 bundle

    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".
    0
    installs
14. ▌
    Design Research · krishna-modi12 bundle

    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 constraints; hand off to component-patterns to build it.
    0
    installs
15. ▌
    AI UI Generation · krishna-modi12 bundle

    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.
    0
    installs
16. ▌
    React Components · krishna-modi12 bundle

    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 a whole page (landing-pages).
    0
    installs
17. ▌
    Canvas Typography · krishna-modi12 bundle

    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 scale (design-system), nor for general motion (animations).
    0
    installs
18. ▌
    Design Principles · krishna-modi12 bundle

    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 for rule-checking finished UI (web-interface).
    0
    installs
19. ▌
    React Performance · krishna-modi12 bundle

    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.
    0
    installs
20. ▌
    Component Patterns · krishna-modi12 bundle

    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 UI". Not for building a component API from scratch (react-components).
    0
    installs