Skip to content

Instantly share code, notes, and snippets.

View tak-dcxi's full-sized avatar

TAK tak-dcxi

41 followers · 1 following
View GitHub Profile
@tak-dcxi
tak-dcxi / SKILL.md
Last active March 18, 2026 03:45
Animations Skill
name description
animations
UI アニメーションの要否判断、動き方・見せ方・実装方針の提案、パフォーマンスとアクセシビリティのレビューを行う。対象は hover, active, focus, popover, tooltip, dropdown, dialog, tab, segmented control, card, button, toast, accordion, carousel, scroll-linked animation, View Transitions など。

Animations Skill

以下のようなタスクでこの Skill を使うこと。

  • UI にアニメーションを追加する
@tak-dcxi
tak-dcxi / README.md
Last active February 4, 2026 00:45
Draft: CSSのレビューの時に見ておくものリスト

Draft: CSSのレビュー時に確認しておくものリスト

  • 下書き途中なのでそのうちまだ増える予定である。
  • あくまで自分用であり、他人にこうレビューしろという意図はない。
  • ある程度書ききったら非公開にする可能性もある。

マインドセット

  • 指摘をする際は、必ず「理由」と「解決策」をセットにする（「この書き方はダメです」だけではレビューにならない）。
  • [MUST] は、仕様・コーディング規約に反するもの／バグが起きているもの／将来的に深刻な問題になりそうなもの／ユーティリティ・アクセシビリティを阻害しているものを優先して扱う。次点として「改善したほうが良いもの」を挙げる。
@tak-dcxi
tak-dcxi / base.css
Created August 31, 2025 17:25
Fit Text
fit-text {
display: block flow;
&::part(svg) {
display: block flow;
inline-size: 100%;
block-size: auto;
}
&::part(text) {
@tak-dcxi
tak-dcxi / rect-observer-element.ts
Last active August 12, 2025 21:55
RectObserver
/**
* 要素の位置情報を監視してCSS変数として:rootに設定するWeb Component
* AnchorPositioningのような位置指定に使用可能
*
* @example
* ```html
* <rect-observer var-prefix="global-header">
* <header>...</header>
* </rect-observer>
* ```
@tak-dcxi
tak-dcxi / ResponsiveTable.ts
Created July 3, 2025 02:02
ResponsiveTable
/**
* Add ARIA attributes to table elements and their children.
* When the display property is changed with CSS, the element may not be recognized as a table.
* @see https://adrianroselli.com/2018/05/functions-to-add-aria-to-tables-and-lists.html
* @param {HTMLElement} container - Container element to apply ARIA attributes to
* @returns {void}
*/
function addTableARIA(container: HTMLElement): void {
const tables = container.querySelectorAll<HTMLTableElement>("table");
for (const table of tables) {
@tak-dcxi
tak-dcxi / writing-style.md
Last active July 1, 2025 21:27
writing-style.md

技術記事執筆スタイルガイド

このファイルは、高品質で一貫性のある技術記事を執筆するためのスタイルガイドです。あなたの文体の特徴と執筆依頼の要件を統合した、包括的な指針として機能します。

1. 文章の基本スタイル

1.1. 口調・トーン

  • AI特有の英文を和訳したような表現（例：「〜の世界へ飛び立ちましょう」）は避けて、日本語の技術記事のような自然な文体を心がける。
  • です・ます調を基本とし、読者に対して丁寧で親しみやすい語りかけを心がける。
@tak-dcxi
tak-dcxi / README.md
Last active February 1, 2026 06:14
「@scope入門」という記事を読んで改めて @scope の設計方法を考える

「@scope入門」という記事を読んで改めて @scope の設計方法を考える

ICS MEDIAで新しく掲載された以下の記事を読みました。

https://ics.media/entry/250520/

大前提として、私は ICS MEDIA の記事を愛読していますし、池田さんをはじめとして ICS で働くエンジニアの方々とはリアルで親交もあり、尊敬しています。

上述した「@scope入門」という記事に関しても @scope の基礎的な使い方が纏まっており、黎明期ゆえに文献の少ない @scope にフィーチャーした参考記事としては質の高い記事であることは間違いありません。

@tak-dcxi
tak-dcxi / .stylelintrc.cjs
Last active June 3, 2025 04:19
ビューポート単位に関するユーティリティ変数およびStylelint設定
module.exports = {
rules: {
'unit-disallowed-list': [
[
'vw',
'vh',
'vi',
'vb',
'vmin',
'vmax'
@tak-dcxi
tak-dcxi / css.code-snippets
Created May 16, 2025 17:41
Container Query Snippets
{
"container": {
"prefix": "container",
"body": [
"--_container-size-min: $1;",
"--_container-size-max: $2;",
"--_to-cqi-min: calc(tan(atan2(1px, var(--_container-size-min))) * 100cqi);",
"--_to-cqi-max: calc(tan(atan2(1px, var(--_container-size-max))) * 100cqi);",
"container: $3 / inline-size;",
"@container style(--debug: true) {",
@tak-dcxi
tak-dcxi / typography.md
Last active March 17, 2026 12:32
タイポグラフィCSS

タイポグラフィ

font-family

  • フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。
  • 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。
    • Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。
    • Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。
    • Mac/iOS はヒラギノ角ゴ ProN が適用される。
  • アップデートによるフォントの変更の懸念はあるものの、ディスレクシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点では font-family: sans-serif の指定を推奨する。