-
business-card
物理カード不要のデジタル名刺サイト (Astro 5 + Tailwind 4 / SSG / 日没連動テーマ)
→ github.com/torifo/business-card -
bookmarklet-kit
ドラッグ&ドロップで即インストールできるブックマークレット集（GitHub Pages 公開） / A gallery of handy bookmarklets, installable by drag & drop.
→ github.com/torifo/bookmarklet-kit -
snaptick-desktop-app
Ultra-lightweight desktop timer for instant focus sessions, built with Go, Wails v3, and Vanilla TypeScript.
- desktop
-
homebrew-snaptick
Homebrew tap for SnapTick — an ultra-lightweight menu bar timer.
→ github.com/torifo/homebrew-snaptick -
animation-tilt-card
Animation study — 3D tilt card with cursor-driven rotateX/Y and synchronized holographic conic gloss + linear shine streak. Built into a fictional design studio Studio HALO portfolio (6 works, identity/motion/book/restaurant/magazine/packaging). Pure HTML/CSS/JS.
- animation
- design
-
animation-scroll-type
Animation study — scroll-driven typography. Sticky 100vh stage interpolates font-size, letter-spacing, weight, opsz, SOFT, WONK across 4 panels. Built into a fictional type foundry FOUNDRY ÅNGSTRÖM product page for QUARTZ DISPLAY. Pure HTML/CSS/JS, Fraunces variable font.
- animation
- design
-
animation-blob-morph
Animation study — organic blob morphing via multi-octave noise + global breath + cursor proximity. Built into a fictional conversational AI SYNCH hero with listening/thinking/speaking state synchronization. Pure HTML/CSS/JS, no WebGL.
- animation
- design
-
animation-iris-shutter
Animation study — multi-blade camera iris transition (close → swap → open). Built into a fictional film label REEL ZERO short film index with credits, schedule, multi-layer CSS stills. Pure HTML/CSS/JS, no WebGL.
- animation
- design
-
animation-layered-parallax
Animation study — layered parallax product page. Scroll-driven multi-layer depth + 3D product micro-rotation + hairline spec annotations. Apple/B&O-style. Pure HTML/CSS/JS, no WebGL.
- animation
- design
-
reachtrail-app
基準地点から足を伸ばした距離を、ログとして刻む。
- mobile
- backend
-
animation-letter-split
Animation study — kinetic letter-split. Char/word split × flip/drop/scatter/wave modes × load + scroll + replay. SaaS landing demo. Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-fluid-mask
Animation study — fluid mask gallery transition. Wavy liquid curtain covers/swaps/reveals; per-work effects (sand ripples, backlit field, particles, skyline). Pure HTML/CSS/JS, no WebGL.
- animation
- design
-
animation-rect-ripple
Animation study — rectangular button ripple. Direction-aware edge fill (wipe) + cursor-origin mosaic propagation (grid) + square click ripple. Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-card-rotate
Animation study — 3D card-rotate hero. Card fan assembles in 3D on load; idle sway + cursor-follow + drag-to-spin (clamped so no back faces). Pure CSS 3D, no WebGL.
- animation
- design
-
animation-page-swipe
Animation study — page-name swipe transition. Full-screen overlay sweeps with a giant page name; nav/arrows/touch-swipe, direction-aware. Sample studio site. Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-liquid-cursor
Animation study — gooey liquid cursor. Multiple lagging blobs merged via SVG goo filter; stretches on fast moves, sticks to links. Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-line-draw
Animation study — scroll-synced SVG line drawing. Stroke draws as you scroll (position-based); switchable shape gallery (polygon/star/spiral). Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-camera-dive
Animation study — 3D camera-dive page transition. Camera punches through the current screen into the next (pure CSS 3D, no WebGL). Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-text-shuffle
Animation study — hover text shuffle. Letters decode from the cursor position outward (scramble to glyphs, then resolve). Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-wave-parallax
Animation study — SVG wave parallax. Layered SVG waves react to scroll velocity and settle back. Pure HTML/CSS/JS, no build.
- animation
- design
-
animation-grid-reveal
Animation study — grid reveal hero. Grid lines draw in, then content arrives (Stripe/Linear-style). Pure HTML/CSS/JS, no build.
- animation
- design
-
meme-fortress-www
インターネットのくだらなさを、面白おかしくに展示する。
- web
- design
-
design-beauty-salon-wabi
Beauty Salon Design Study — wabi persona (椿 TSUBAKI). Tea-room beauty house framing hair, headspa, and kitsuke as one continuous ritual of becoming whole. Fictional design study.
- design
-
design-beauty-salon-rouge
Beauty Salon Design Study — rouge persona (MAISON ROUGE). Parisian haute-couture esthetique with CSS-rendered velvet texture and a 12-month bridal timeline. Fictional design study.
- design
-
design-beauty-salon-noir
Beauty Salon Design Study — noir persona (MAISON D'OMBRE). Night-only Parisian maison integrating hair and spa, lit by candles and antique brass. Fictional design study.
- design
-
design-beauty-salon-ivoire
Beauty Salon Design Study — ivoire persona (MAISON IVOIRE). Ginza maison built on three ivory tones (Ivoire / Marbre / Vélin), never touching pure white. Fictional design study.
- design
-
design-fitness-gym-reshape
Fitness Gym Design Study — reshape persona (FORGE STUDIO). Premium transformation studio proving results via body-composition metrics. Fictional design study.
- design
-
design-fitness-gym-totonoi
Fitness Gym Design Study — totonoi persona (蒼 AOI WELLNESS HOUSE). Sauna-centered recovery house honoring the Japanese 'totonou' culture. Fictional design study.
- design
-
torifo
全体最適を追求する開発者のホームページ。
→ github.com/torifo/torifo -
design-fitness-gym-salon
Fitness Gym Design Study — salon persona (MIDNIGHT CLUB). Gym × hotel lounge × members' bar — stylish social space without dating-site vibes. Fictional design study.
- design
-
design-fitness-gym-studio
Fitness Gym Design Study — studio persona (ATELIER FIT). Coworking with embedded gym for the work-train-recover daily rhythm. Fictional design study.
- design
-
design-apparel-street
ARCH — Streetwear × dark editorial apparel brand. Fictional brand design study.
- design
-
design-furniture-urban
BLOC — Urban graphic × architectural brutalism furniture brand. Fictional brand design study.
- design
-
design-apparel-trend
LUEUR — K-beauty × Y2K girly apparel brand. Fictional brand design study.
- design
-
design-art-gallery-emerging
HALF — fictional emerging art gallery. Part of the art-gallery persona design study.
- design
-
design-apparel-vintage
FRAY — Slow fashion × letterpress apparel brand. Fictional brand design study.
- design
-
design-vintage-sundries-zakka
hibi-zakka — Natural wa-modern vintage zakka shop. Fictional design study.
- design
-
design-vintage-sundries-showa-retro
KISSA MIKAZUKI — Showa-retro kissaten vintage sundries shop. Fictional design study.
- design
-
design-vintage-sundries-kottou
IKKOKU — Kyoto fine antiques and kottou shop. Fictional design study.
- design
-
design-art-gallery-institutional
MASS — fictional public modern-art museum. Part of the art-gallery persona design study.
- design
-
design-vintage-sundries-mingei
TSUCHI to ITO — Mingei folk-craft vintage sundries shop. Fictional design study.
- design
-
design-furniture-artisan
BURL — Artisan workshop × newspaper editorial furniture brand. Fictional brand design study.
- design
-
design-furniture-luxury
VELA — Luxury atelier × museum chapter experience furniture brand. Fictional brand design study.
- design
-
design-apparel-minimal
FORM — Quiet luxury × architecture apparel brand. Fictional brand design study.
- design
-
design-seasidebookshop-shiosai
Seaside bookshop design study — shiosai persona site (fictional shop, for design research only)
- design
-
design-seasidebookshop-sangosho
Seaside bookshop design study — sangosho persona site (fictional shop, for design research only)
- design
-
design-seasidebookshop-minato
Seaside bookshop design study — minato persona site (fictional shop, for design research only)
- design
-
design-seasidebookshop-fuyunagi
Seaside bookshop design study — fuyunagi persona site (fictional shop, for design research only)
- design
-
design-stationery-character
Stationery design study — character stationery shop. Fictional design study.
- design
-
design-stationery-notebook
Stationery design study — notebook stationery shop. Fictional design study.
- design
-
design-stationery-mono
Stationery design study — mono stationery shop. Fictional design study.
- design
-
design-stationery-blueprint
Stationery design study — blueprint stationery shop. Fictional design study.
- design
-
design-art-gallery-digital
HEX — fictional Web3 / generative art gallery. Part of the art-gallery persona design study.
- design
-
design-art-gallery-bluechip
NORE — fictional blue-chip art gallery. Part of the art-gallery persona design study.
- design
-
skills
Claude Code skills — overview and navigation / Claude Code スキル一覧・ナビゲーション
- ai
-
skills-sdd
Claude Code skill: spec-driven development with requirements.md, design.md, and tasks.md following Kiro's three-phase workflow / 要件定義・技術設計・タスク分解の3フェーズで仕様駆動開発を進める
- ai
-
skills-create-spec
Claude Code skill: generates a rich self-contained spec.md covering user stories, architecture, API contracts, and data models / ユーザーストーリー・アーキテクチャ・API・データモデルを網羅したspec.mdを生成する
- ai
-
design-furniture-nordic
HVILE — Nordic organic × Kinfolk editorial furniture brand. Fictional brand design study.
- design
-
skills-context-snapshot-clear
Claude Code skill: context snapshot and clear for seamless session continuity / コンテキストをスナップショット保存してセッションを継続する
- ai
-
skills-mongo-pattern
Claude Code skill: designs MongoDB schemas from access patterns using Computed, Extended Reference, Subset, and Bucket patterns / アクセスパターン駆動でMongoDBスキーマを設計する
- ai
- backend
-
skills-react-state-review
Claude Code skill: reviews React state design for derived state, mutation bugs, and missing keys / Reactの状態設計を派生状態・mutationバグ・keyの欠如でレビューする
- ai
- web
-
skills-mypy-fix
Claude Code skill: fixes mypy/pyright type errors at root cause, preferring narrow types over Any / mypy/pyrightの型エラーをroot causeで修正。Anyより狭い型を優先する
- ai
-
skills-todo-aggregate
Claude Code skill: collects TODO/FIXME/HACK comments into a single report grouped by severity / TODO・FIXME・HACKコメントを深刻度別にまとめたレポートに集約する
- ai
-
skills-sql-explain
Claude Code skill: analyzes EXPLAIN output and proposes specific query optimizations / EXPLAINの出力を解析し具体的なクエリ最適化を提案する
- ai
- backend
-
skills-secret-scan
Claude Code skill: scans files and staged changes for leaked secrets like API keys and tokens / APIキーやトークンなどの漏洩したシークレットをスキャンする
- ai
-
skills-dep-audit
Claude Code skill: audits dependencies for vulnerabilities, outdated versions, and unused packages / 脆弱性・古いバージョン・未使用パッケージを依存関係から検出する
- ai
-
skills-dead-code
Claude Code skill: detects unused exports, imports, and functions — confirms each removal / 未使用のエクスポート・インポート・関数を検出し削除前に確認する
- ai
-
skills-error-trace
Claude Code skill: systematically analyzes stack traces to extract root cause / スタックトレースを体系的に分析して根本原因を特定する
- ai
-
skills-mock-design
Claude Code skill: adds mocks at correct boundaries without over-mocking, distinguishes when to mock vs use real values / 適切な境界にモックを追加。モックすべき箇所と実値を使うべき箇所を判断する
- ai
-
skills-test-gen
Claude Code skill: generates test cases covering happy path, edge cases, and error cases for existing functions / 既存関数の正常系・エッジケース・エラーケースのテストを生成する
- ai
-
skills-refactor-safe
Claude Code skill: refactors with green test baseline, runs tests after each step, reverts immediately on failure / テスト安全網でリファクタリング。各ステップ後にテスト実行、失敗したら即リバート
- ai
-
skills-run-tests
Claude Code skill: detects test runner, estimates time, offers filter and background options before running / テストランナーを検出し実行前に時間見積もりとフィルタ・バックグラウンド実行を提案する
- ai
-
skills-plan-before-action
Claude Code skill: outputs numbered plan and waits for approval before modifying files or running destructive commands / ファイル変更・破壊的コマンドの前に番号付き計画を提示して承認を待つ
- ai
-
skills-time-estimate
Claude Code skill: estimates execution time, token usage, and parallelism before heavy operations / 重い操作の前に実行時間・トークン使用量・並列数を見積もる
- ai
-
skills-branch-cleanup
Claude Code skill: safe stale branch and worktree cleanup with per-deletion confirmation / 削除前に確認しながらステールブランチとワークツリーを安全に削除する
- ai
-
skills-safe-commit
Claude Code skill: pre-commit validator for secrets, AI attribution, and policy violations / コミット前にシークレット・AI帰属・ポリシー違反を検証してブロックする
- ai
-
skills-changelog
Claude Code skill: bilingual EN/JA changelog generator from git history / git履歴から英日バイリンガルの更新履歴を生成する
- ai
-
skills-commit
Claude Code skill: atomic bilingual EN/JA commits with staged file confirmation / ステージ済みファイルを確認しながら英日バイリンガルのアトミックコミットを作成する
- ai
-
room-design
ブラウザの中で、部屋を組み立てる。
- design
- web
-
prism-flags
CLI引数一般化事典 — 1つのフラグが、ツールによってどう変わるか。横断的に可視化する事典。
- tool
- web
-
slack-times-butler-bot
timesに流した言葉を、資産に変える執事。
- backend
- tool
-
wording-stock
日本語の豊かな表現を、投稿して、発見して、手元に蓄える場所。
- backend
- web
-
anchor-ports
ポート番号を、羅針盤として持ち歩く。
- web
- tool
- design
-
slate-errors
放課後の黒板で、HTTPエラーを学び直す。エラーは間違いではない、発見である。
- web
-
tailwind-jp-blueprint
Tailwind CSS 標準化テンプレート — 何を揃えるか・何を揃えないかを整理した最小構成のデザインシステム
- design
- web
- tool
-
webgl-design
水面が揺れるように、インタラクションがデザインになる。3ライブラリ比較レポート。
- animation
- design
- web
-
freeslot-allocator-app
自由時間を、計画に変える。そして、振り返れる形で残す。
- mobile
-
fudagit-web
読み札が浮かぶたびに、Gitを一手ずつ覚えていく。
- tool
- web
-
cmd-mock-cli
本番環境を汚さず、コマンドの感覚を体で覚える。
- tool
- backend
-
portfolio-astro
作ったものが、自分を語る場所。
- design
- backend
- web
-
llm-google-calendar-browser-extension
言葉を入力するだけで、予定が生まれる。確認は、いつも人間が行う。
- ai
- backend
- tool
-
portion-flow
比率を入力して、合計を分配する。ただそれだけの、道具。
- web
-
shikuty
日本地図を、手で覚える。
- backend
- web
-
matter-reson
名前を捨てて、問いを置く。共鳴が、答えを運ぶかもしれない。
- backend
- web
-
nexus-sticky
デスクトップに付箋を並べて、思考を常駐させる。
- desktop
-
echo-news
複数のニュースを集めて、重複を除いて、ターミナルに届ける。
- backend
- tool
-
astral-drive
ストレージの奥に眠る巨大ディレクトリを、数秒で炙り出す。
- tool
- backend
-
java-game-RetroShootingGame.Genshin_Impact-Style
雷電将軍と、Javaで弾幕を張る。
- animation
- desktop
-
jgeo
47都道府県を、街角の景色から言い当てる。
- web
-
wanderpath-journey
旅の記録を、地図に重ねて残す。
- backend
- web
-
discord-vc-watcher-bot
寝落ちを検知して、そっとボイスチャンネルから退席させる。
- backend
- tool
-
cataloger-shelf
作った作品を、棚に並べるように記録する。
- backend
- web
該当する作品がありません No matching works