직업 분류
소프트웨어 개발자
설명
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
원문 언어: 영어
업데이트
이 저장소의 skills
oimiragieo/gotcontext-frontend-developer - 8페이지
SkillsMP는 oimiragieo/gotcontext-frontend-developer에서 458개의 skill을 수집했습니다. skill을 열어 소스와 세부 정보를 확인하세요.
oimiragieo/gotcontext-frontend-developer수집된 skill 458개 중 40개를 표시합니다.
skill
직업 분류
설명
업데이트
직업 분류
소프트웨어 개발자
설명
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Use when building, fixing, polishing, or comparing any terminal UI — ratatui/crossterm REPLs, agent CLI chrome — or when a TUI shows a frozen spinner, dead keys, duplicated responses, stale cells, flicker, resume failures on dangling tool_use, or when you…
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Use when fixing, auditing, improving, or building any web UI — before reading or editing component code. Fires on contrast/a11y/overflow/responsive/hover- focus/layout complaints, polish, audit, or any visual change. Never diagnose a UI defect from code…
원문 언어: 영어
업데이트
직업 분류
그래픽 디자이너
설명
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
원문 언어: 영어
업데이트
직업 분류
그래픽 디자이너
설명
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon…
원문 언어: 영어
업데이트
직업 분류
그래픽 디자이너
설명
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design,…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js,…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when designing or auditing AI product human-in-the-loop — write approval, proposal accept/reject, action confirm, spend caps, run detail, memory capture, or any AI action with irreversible blast radius. Trigger on confirmation UX, undo, cost-before-act,…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when designing AI product trust, privacy, or honesty UX — cloud disclosure, voice/mic consent, transcript retention, memory ownership, AI labeling, caveats, or audit footprints. Trigger on disclose cloud, recording consent, watermark, incognito, or…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when designing AI product first-run or blank-slate UX — chat empty state, example prompts, capability discovery, templates, nudges, or follow-ups. Trigger on "users don't know what to ask", onboarding, suggestion chips, or discoverability.
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Use when building a scroll-driven cinematic 3D landing experience for any brand: AI-generated photoreal frames displaced into real 3D by depth maps, a scroll-scrubbed camera fly-through with weighted-leg pacing and per-leg camera moves, mouse parallax,…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when generating, prototyping, or iterating on UI designs (prototypes, wireframes, slide decks, landing/dashboard mockups) with Anthropic's Claude Design tool at claude.ai/design — particularly when you want a design system applied automatically and a…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Use when the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website — or says 'make a copy of this site', 'rebuild this page', 'pixel-perfect clone'. Reverse-engineers one or more sites in one shot: extracts assets, CSS, and content…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when the user asks to audit, review, critique, or "make sure it looks right" on a deployed web page, component, or Figma mockup — or when they mention visual issues, CRO, conversion rate, design consistency, accessibility, "feels off", "looks bad", "make…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells,…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR,…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and…
원문 언어: 영어
업데이트
직업 분류
그래픽 디자이너
설명
Use when you need high-quality stock-style images from Aura Assets (aura.build/assets) similar to Unsplash for design mockups and marketing: backgrounds, abstract wallpapers, architecture, portraits, and headshots. Includes a workflow for searching by tag on…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam;…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like containers need refined shadows without default Tailwind shadow scales or…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders.…
원문 언어: 영어
업데이트
직업 분류
웹 개발자
설명
Use when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines, editorial grid markers, or small corner-square frame details.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain…
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Create a recurring daily UI inspiration capture. Use when the user asks to run, refresh, package, or validate dated UI inspiration bundles, especially for `articles/YYYY-MM-DD-ui-inspiration-capture/` outputs, Framer/Dribbble landing-page inspiration,…
원문 언어: 영어
업데이트
직업 분류
웹·디지털 인터페이스 디자이너
설명
Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights…
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral, precise, structured, editorial, technical, or guide-border web…
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
원문 언어: 영어
업데이트
직업 분류
소프트웨어 개발자
설명
Create a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc. Use when a design needs a premium planetary, orbital, synthesized data-globe effect rendered with real WebGL/Three.js particles, not…
원문 언어: 영어
업데이트
수집된 skill 458개 중 40개를 표시합니다.